/**
 * Student Calculators Pro — Split-Layout Calculator Redesign
 * Scoped entirely under .sc-split-layout so it never affects the
 * other calculators, which keep using the original .sc-calc-card /
 * .sc-result-card styling from calculators.css.
 */

.sc-split-layout {
  display: grid;
  grid-template-columns: minmax(320px, 460px) 1fr;
  gap: 24px;
  align-items: start;
  max-width: 100%;
}
/* Prevents deeply-nested fixed-width content (tables, buttons) from
   forcing the whole grid — and the page — to overflow horizontally.
   Without this, a grid item's "automatic minimum size" is based on
   its content's min-content width, which can blow past the track's
   own max size. */
.sc-split-layout > * {
  min-width: 0;
}
@media (max-width: 900px) {
  .sc-split-layout { grid-template-columns: 1fr; }
}

/* ── Left: input card ── */
.sc-split-layout .sc-calc-card-v2 {
  background: var(--sc-white);
  border: 1px solid var(--sc-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--sc-shadow-sm);
}

.sc-split-layout .sc-card-header-v2 {
  padding: 26px 26px 18px;
}
.sc-split-layout .sc-card-header-v2 h2 {
  font-size: 21px;
  font-weight: 700;
  color: var(--sc-text-900);
  margin: 0 0 6px;
  letter-spacing: -.3px;
}
.sc-split-layout .sc-card-header-v2 p {
  font-size: 13.5px;
  color: var(--sc-text-500);
  margin: 0;
  line-height: 1.5;
}

/* format tabs — Percentage is the only computed mode for this tool;
   the others are honest navigation to the plugin's real matching tools,
   not a fake in-place recalculation. */
.sc-mode-tabs {
  display: flex;
  gap: 4px;
  background: var(--sc-surface);
  border-radius: 10px;
  padding: 4px;
  margin: 0 26px 22px;
}
.sc-mode-tab {
  flex: 1;
  text-align: center;
  padding: 9px 8px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sc-text-500);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.sc-mode-tab.active {
  background: var(--sc-white);
  color: var(--sc-text-900);
  box-shadow: var(--sc-shadow-sm);
  cursor: default;
}
.sc-mode-tab:not(.active):hover {
  color: var(--sc-primary);
}

.sc-split-layout .calc-card-body-v2 {
  padding: 0 26px 8px;
}

/* Course tables (weighted/unweighted GPA calculators) must fit the
   narrower split-layout card without a horizontal scrollbar — the
   460px floor from the legacy single-column design is too wide here. */
.sc-split-layout .sc-table {
  min-width: 0;
}
.sc-split-layout .course-table-wrap {
  overflow-x: visible;
}
.sc-split-layout .sc-table thead th {
  padding: 10px 8px;
  font-size: 10px;
}
.sc-split-layout .sc-table tbody td {
  padding: 8px 6px;
}
.sc-split-layout .sc-table .sc-form-input {
  padding: 7px 8px;
  font-size: 12.5px;
}
@media (max-width: 480px) {
  /* Percentage-based column widths already fit narrow phones on their
     own — forcing a wider min-width just creates an unnecessary
     horizontal scrollbar. table-layout:fixed makes the browser respect
     those percentages exactly instead of expanding to fit content. */
  .sc-split-layout .course-table-wrap { overflow-x: visible; }
  .sc-split-layout .sc-table { min-width: 0; width: 100%; table-layout: fixed; }
  .sc-split-layout .sc-table .sc-form-input { width: 100%; min-width: 0; padding: 6px 4px; font-size: 12px; }
  .sc-split-layout .sc-table thead th { padding: 8px 4px; font-size: 9px; word-break: break-word; }
  .sc-split-layout .sc-table tbody td { padding: 6px 3px; }
}

.sc-split-layout .calc-card-footer-v2 {
  padding: 18px 26px 26px;
  margin-top: 10px;
  border-top: 1px solid var(--sc-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.sc-footer-hint {
  font-size: 12px;
  color: var(--sc-text-500);
  line-height: 1.4;
}
.sc-footer-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.sc-split-layout .btn-calculate,
.sc-split-layout .btn-reset {
  width: auto;
  margin: 0;
}

/* ── Right: result column ── */
.sc-result-col { display: flex; flex-direction: column; gap: 16px; }

/* dark gradient result panel */
.sc-result-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #170f45 0%, #241a6b 45%, #4c2f9e 100%);
  border-radius: 20px;
  padding: 30px 28px 26px;
  color: var(--sc-white);
  box-shadow: 0 20px 45px rgba(23,15,69,.25);
  animation: sc-fade-in .35s ease;
}
.sc-result-panel::before {
  content: "";
  position: absolute;
  top: -45%; right: -18%;
  width: 65%; height: 150%;
  background: radial-gradient(circle, rgba(124,58,237,.38), transparent 70%);
  pointer-events: none;
}
.sc-result-eyebrow {
  position: relative;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #b6aef0;
  margin-bottom: 10px;
}
.sc-result-big {
  position: relative;
  font-size: clamp(38px, 6.5vw, 56px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.5px;
}
.sc-result-big .suffix {
  font-size: 18px;
  font-weight: 600;
  color: #d7d2f5;
  margin-left: 8px;
  letter-spacing: 0;
}
.sc-result-desc {
  position: relative;
  font-size: 14.5px;
  line-height: 1.6;
  color: #d7d2f5;
  margin: 16px 0 24px;
  max-width: 46em;
}
.sc-result-desc b { color: var(--sc-white); }

.sc-risk-bar-wrap { position: relative; }
.sc-risk-bar {
  position: relative;
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg,
    #10b981 0%, #10b981 52%,
    #f59e0b 65%, #fb923c 80%,
    #ef4444 92%, #ef4444 100%);
}
.sc-risk-marker {
  position: absolute;
  top: 50%; left: 0%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--sc-white);
  border: 3px solid #170f45;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  transition: left .5s cubic-bezier(.19,1,.22,1);
}
.sc-risk-legend {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 11px;
  color: #b6aef0;
  gap: 8px;
}
.sc-risk-legend span { white-space: nowrap; }
.sc-risk-legend span.is-current { color: var(--sc-white); font-weight: 700; }

/* insight cards */
.sc-insight-card {
  background: var(--sc-white);
  border: 1px solid var(--sc-border);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  gap: 14px;
  box-shadow: var(--sc-shadow-sm);
}
.sc-insight-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}
.sc-insight-icon.meaning { background: var(--sc-primary-light); color: var(--sc-primary); }
.sc-insight-icon.risk    { background: var(--sc-danger-light);  color: var(--sc-danger); }
.sc-insight-icon.next    { background: var(--sc-warning-light); color: #c2410c; }
.sc-insight-body { min-width: 0; }
.sc-insight-body .lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sc-text-500);
  margin-bottom: 4px;
}
.sc-insight-body .txt {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--sc-text-700);
}
.sc-insight-body .txt a { color: var(--sc-primary); font-weight: 600; text-decoration: none; }
.sc-insight-body .txt a:hover { text-decoration: underline; }

/* footer action buttons */
.sc-result-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.sc-btn-save-dashboard,
.sc-btn-share {
  flex: 1 1 130px;
  min-width: 0;
  border-radius: 12px;
  padding: 14px 12px;
  font-weight: 700;
  font-size: 14.5px;
  font-family: var(--sc-font);
  cursor: pointer;
  text-align: center;
  white-space: normal;
  line-height: 1.3;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.sc-btn-save-dashboard {
  background: linear-gradient(135deg, #ff6b52, #ff9642);
  color: var(--sc-white);
  border: none;
  box-shadow: 0 8px 18px rgba(255,107,82,.28);
}
.sc-btn-save-dashboard:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(255,107,82,.34); }
.sc-btn-save-dashboard:disabled { opacity: .7; cursor: default; transform: none; }
.sc-btn-share {
  background: var(--sc-white);
  color: var(--sc-text-900);
  border: 1.5px solid var(--sc-border);
}
.sc-btn-share:hover { background: var(--sc-surface); border-color: var(--sc-text-300); }

/* empty state — shown before the first calculation */
.sc-result-empty {
  background: linear-gradient(135deg, #170f45 0%, #241a6b 45%, #4c2f9e 100%);
  border-radius: 20px;
  padding: 48px 28px;
  color: var(--sc-white);
  text-align: center;
  box-shadow: 0 20px 45px rgba(23,15,69,.2);
}
.sc-result-empty i { font-size: 26px; color: #b6aef0; margin-bottom: 14px; display: block; }
.sc-result-empty h3 { font-size: 17px; margin: 0 0 6px; font-weight: 700; }
.sc-result-empty p { font-size: 13.5px; color: #cfc9ee; margin: 0; max-width: 32em; margin-left: auto; margin-right: auto; }

@media (max-width: 560px) {
  .sc-card-header-v2, .sc-mode-tabs, .calc-card-body-v2, .calc-card-footer-v2 { margin-left: 18px; margin-right: 18px; }
  .sc-mode-tabs { margin-left: 18px; margin-right: 18px; }
  .calc-card-body-v2 { padding-left: 18px; padding-right: 18px; }
  .calc-card-footer-v2 { padding-left: 18px; padding-right: 18px; }
  .sc-result-panel { padding: 24px 20px 22px; }
  .sc-result-cta-row { flex-direction: column; }
  .sc-btn-save-dashboard, .sc-btn-share { min-width: 0; }
}

/* ── Shared 3-column course-row grid (used by GPA/rank/course calculators) ── */
.sc-course-row-3 {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr 0.9fr 26px;
  gap: 10px;
  align-items: center;
}
#course_grid_header.sc-course-row-3 {
  grid-template-columns: 1.3fr 0.7fr 0.9fr;
}
.sc-row-lab {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: var(--sc-text-500, #64748B);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.sc-course-rows-list { display: flex; flex-direction: column; gap: 10px; }
.sc-course-rows-list .sc-course-row-3 { margin-bottom: 0; }
.sc-course-row-3 .btn-remove-row {
  background: none;
  border: none;
  color: var(--sc-text-500, #64748B);
  cursor: pointer;
  font-size: 14px;
  padding: 6px;
  justify-self: end;
}
.sc-course-row-3 .btn-remove-row:hover { color: #E11D48; }

@media (max-width: 560px) {
  /* Data rows: course name gets its own full-width line; credits, grade
     and the remove button share a second line so the ✕ never ends up
     stranded on its own full-width row. */
  .sc-course-rows-list .sc-course-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 26px;
    grid-template-areas:
      "name name name"
      "credits grade remove";
    gap: 6px;
  }
  .sc-course-rows-list .sc-course-row-3 > *:nth-child(1) { grid-area: name; }
  .sc-course-rows-list .sc-course-row-3 > *:nth-child(2) { grid-area: credits; }
  .sc-course-rows-list .sc-course-row-3 > *:nth-child(3) { grid-area: grade; }
  .sc-course-rows-list .sc-course-row-3 > *:nth-child(4) { grid-area: remove; }

  /* Header row: mirror the same 2-line layout so "Credits"/"Grade"
     labels still sit above their fields instead of being lost. */
  #course_grid_header.sc-course-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "name name"
      "credits grade";
    gap: 2px 6px;
  }
  #course_grid_header.sc-course-row-3 > *:nth-child(1) { grid-area: name; }
  #course_grid_header.sc-course-row-3 > *:nth-child(2) { grid-area: credits; }
  #course_grid_header.sc-course-row-3 > *:nth-child(3) { grid-area: grade; }
}

/* Widen the shared container specifically for v2 split-layout calculators
   so left/right whitespace shrinks and content fills the width properly */
.sc-calc-container:has(.sc-split-layout) {
  max-width: 1000px;
  padding-left: 16px;
  padding-right: 16px;
}

/* Optional: give the right-side result panel a bit more room on wide screens */
@media (min-width: 901px) {
  .sc-calc-container:has(.sc-split-layout) .sc-split-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Keep both main calculator boxes exactly equal on desktop. */
@media (min-width: 901px) {
  .sc-split-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: stretch;
  }

  .sc-split-layout > .sc-calc-card-v2,
  .sc-split-layout > #scp-result-wrap,
  .sc-split-layout > .sc-result-col {
    width: 100%;
    min-width: 0;
  }
}

/* Dashboard action uses the same blue language across every calculator. */
.sc-btn-save-dashboard,
#scp-save-result,
#btn_dashboard {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  border-color: #2563eb !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .25) !important;
}

.sc-btn-save-dashboard:hover,
#scp-save-result:hover,
#btn_dashboard:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
  box-shadow: 0 12px 26px rgba(37, 99, 235, .34) !important;
}

/* ============================================================
   Student Calculators — Universal Mobile/Content Fix (No Scroll)
   Safe, scoped fix — applies to ALL calculators using .sc-mode-tabs,
   .sc-split-layout, .sc-grid-2, etc. Does not touch calculation logic.
   ============================================================ */

/* 1) Mode tabs: wrap into a 2nd row instead of clipping or scrolling */
.sc-mode-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  overflow-x: visible !important;
  gap: 6px !important;
  padding: 6px !important;
}
.sc-mode-tab {
  flex: 0 1 auto !important;
  white-space: nowrap !important;
  padding: 9px 14px !important;
}

/* 2) Input grids: force single column once space gets tight,
      so labels/inputs never squeeze or overlap */
@media (max-width: 640px) {
  .sc-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* 3) Split layout (input card + result card): stack on tablets/phones */
@media (max-width: 900px) {
  .sc-split-layout {
    grid-template-columns: 1fr !important;
  }
}

/* 4) Result panel: keep the big number and text from overflowing */
.sc-result-panel,
.sc-result-empty {
  overflow: hidden !important;
}
.sc-result-big {
  font-size: clamp(32px, 8vw, 56px) !important;
  word-break: break-word !important;
}
.sc-result-desc {
  overflow-wrap: break-word !important;
}

/* 5) Risk bar legend: prevent label overlap on narrow screens */
@media (max-width: 480px) {
  .sc-risk-legend {
    flex-wrap: wrap !important;
    row-gap: 4px !important;
  }
}

/* 6) Insight cards: keep icon + text aligned, text wraps cleanly */
.sc-insight-card {
  flex-wrap: nowrap !important;
}
.sc-insight-body {
  min-width: 0 !important;
  overflow-wrap: break-word !important;
}

/* 7) Footer action buttons: stack full-width on small screens */
@media (max-width: 480px) {
  .sc-result-cta-row {
    flex-direction: column !important;
  }
  .sc-btn-save-dashboard,
  .sc-btn-share {
    min-width: 0 !important;
    width: 100% !important;
  }
  .calc-card-footer-v2 {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .sc-footer-actions {
    width: 100% !important;
  }
  .sc-footer-actions .btn-calculate,
  .sc-footer-actions .btn-reset {
    flex: 1 !important;
  }
}

/* 8) Prevent any accidental page-wide horizontal scroll */
.sc-calc-container,
.sc-split-layout,
.sc-calc-card-v2 {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ============================================================
   Mobile polish v4.1.3
   Keep every calculator usable inside narrow theme columns.
   ============================================================ */
.sc-tool-wrap-global,
.sc-tool-wrap-global *,
.sc-tool-wrap-global *::before,
.sc-tool-wrap-global *::after {
  box-sizing: border-box;
}

.sc-tool-wrap-global img,
.sc-tool-wrap-global svg,
.sc-tool-wrap-global canvas {
  max-width: 100%;
}

@media (max-width: 640px) {
  .sc-tool-wrap-global {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .sc-tool-wrap-global .sc-calc-container {
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .sc-tool-wrap-global .sc-split-layout,
  .sc-tool-wrap-global .sc-calc-card-v2,
  .sc-tool-wrap-global .sc-result-col,
  .sc-tool-wrap-global [id$="-result-wrap"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  .sc-tool-wrap-global .sc-card-header-v2,
  .sc-tool-wrap-global .sc-mode-tabs,
  .sc-tool-wrap-global .calc-card-body-v2,
  .sc-tool-wrap-global .calc-card-footer-v2 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .sc-tool-wrap-global .sc-card-header-v2,
  .sc-tool-wrap-global .calc-card-body-v2,
  .sc-tool-wrap-global .calc-card-footer-v2 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .sc-tool-wrap-global .sc-mode-tab {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
    text-align: center;
    white-space: normal !important;
  }

  .sc-tool-wrap-global input:not([type="checkbox"]):not([type="radio"]),
  .sc-tool-wrap-global select,
  .sc-tool-wrap-global textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: 16px !important;
  }

  .sc-tool-wrap-global .sc-result-panel,
  .sc-tool-wrap-global .sc-result-empty {
    border-radius: 16px;
    padding: 22px 18px !important;
  }

  .sc-tool-wrap-global .sc-insight-card {
    align-items: flex-start;
    padding: 14px !important;
  }

  /* Reset the desktop flex-basis. Without flex:none it becomes button height
     after the row changes to a column (the oversized-button mobile bug). */
  .sc-tool-wrap-global .sc-result-cta-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .sc-tool-wrap-global .sc-result-cta-row .sc-btn-save-dashboard,
  .sc-tool-wrap-global .sc-result-cta-row .sc-btn-share {
    display: inline-flex !important;
    flex: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 13px 16px !important;
    border-radius: 12px !important;
    line-height: 1.35 !important;
  }

  .sc-tool-wrap-global .calc-card-footer-v2 {
    gap: 12px !important;
  }

  .sc-tool-wrap-global .sc-footer-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .sc-tool-wrap-global .sc-footer-actions .btn-calculate,
  .sc-tool-wrap-global .sc-footer-actions .btn-reset,
  .sc-tool-wrap-global .btn-calculate,
  .sc-tool-wrap-global .btn-reset {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 13px 16px !important;
    white-space: normal !important;
  }

  .sc-tool-wrap-global .course-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 380px) {
  .sc-tool-wrap-global .sc-mode-tab {
    flex-basis: 100% !important;
  }

  .sc-tool-wrap-global .sc-card-header-v2,
  .sc-tool-wrap-global .calc-card-body-v2,
  .sc-tool-wrap-global .calc-card-footer-v2 {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }
}