/*
  S4A Sudoku Feature Menu (separate file for maintainability)
  - Menu overlay over numpad
  - Shade colours
  - Toggle switches
  - Dark mode overlay + beige board
  - Hide completed numbers styling
*/

/* Keep sudoku container above dark overlay */
body.s4a-darkmode .brand-new-sudoku-game-container{
  position: relative;
  z-index: 9991;
}

#s4a-dark-overlay{
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0.92;
  z-index: 9990;
  pointer-events: none;
}

body.s4a-darkmode{
  background: #000 !important;
}

/* Fallback: if an older template still renders Undo, hide it to prevent UI duplication */
#undo-button,
#undo-button-mobile{
  display: none !important;
}

/* Board "old paper" */
body.s4a-darkmode #brand-new-sudoku-board,
body.s4a-darkmode .brand-new-sudoku-board{
  background: #f2e6cf !important;
}

body.s4a-darkmode .cell{
  background: rgba(255,255,255,0.65);
}

/* ===== Menu panel ===== */
.s4a-menu-panel{
  position: absolute;
  display: none;
  padding: 14px;
  box-sizing: border-box;
  /* Match the numpad/button rounding better so the overlay looks like it belongs */
  border-radius: 12px;
  background: rgba(255,255,255,0.98);
  box-shadow: 0 14px 50px rgba(0,0,0,0.25);
  overflow: auto;
}

.s4a-menu-panel.s4a-open{
  display: block;
}

.s4a-menu-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  margin-bottom: 12px;
}

.s4a-menu-title{
  font-weight: 700;
  font-size: 16px;
}

.s4a-menu-close{
  /* Style like the control-top-row buttons */
  border: none !important;
  background: #f0f0f0 !important;
  color: #000 !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  transition: background 0.2s, box-shadow 0.2s;
  outline: none;
}

.s4a-menu-close:hover{
  background: #e0e0e0 !important;
  box-shadow: 0 0 8px #00ffff;
}

.s4a-menu-section{
  margin-bottom: 14px;
}

.s4a-menu-section-title{
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 10px;
}

/* Puzzle information section */
.s4a-menu-info{
  margin-top: 8px;
}
.s4a-info-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  border-top:1px solid rgba(0,0,0,0.08);
}
.s4a-info-row:first-of-type{ border-top:0; }
.s4a-info-label{
  font-size: 13px;
  color: rgba(0,0,0,0.75);
}
.s4a-info-value{
  font-size: 13px;
  color: rgba(0,0,0,0.9);
  font-weight: 600;
  text-align:right;
  max-width: 55%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ===========================
   Hardest Technique: value on its own line
   - prevents truncation for long technique names
   - wraps naturally under the label
   =========================== */

/* Allow the technique row to wrap */
.s4a-info-row:has(.s4a-info-value[data-info="hardestTechnique"]){
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Put the value under the label and allow wrapping */
.s4a-info-value[data-info="hardestTechnique"]{
  flex: 0 0 100%;
  width: 100%;
  max-width: none !important;

  margin-top: 6px;

  text-align: left !important;

  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  line-height: 1.25;
}

/* If :has() isn't supported in some browsers, still force the value block behavior */
@supports not selector(:has(*)){
  .s4a-info-value[data-info="hardestTechnique"]{
    display: block;
  }
}

/* Share URL row */
.s4a-info-row-link{
  flex-wrap: wrap;
  gap: 8px;
}

.s4a-info-value-link{
  max-width: none;
  width: 100%;
  display:flex;
  gap: 8px;
  align-items:center;
  justify-content:flex-end;
}

.s4a-share-url{
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(245,245,245,0.9);
  color: rgba(0,0,0,0.85);
}

.s4a-copy-btn{
  /* Styled to match the main Sudoku control buttons (modern dark pill look) */
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(64,75,83,1) 0%, rgba(28,35,41,1) 100%);
  color: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2px;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 10px 22px rgba(0,0,0,0.18);
  transition: transform 0.06s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.s4a-copy-btn:hover{
  filter: brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 12px 26px rgba(0,0,0,0.22);
}

.s4a-copy-btn:active{
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 6px 14px rgba(0,0,0,0.18);
}

.s4a-copy-btn.is-copied{
  /* Subtle success accent without clashing with translations */
  box-shadow:
    inset 0 0 0 1px rgba(46, 204, 113, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 10px 22px rgba(0,0,0,0.18);
}

.s4a-copy-toast{
  width: 100%;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.18s ease;
  color: rgba(0,0,0,0.7);
}

.s4a-copy-toast.is-show{ opacity: 1; }

.s4a-shade-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.s4a-shade-btn{
  width: 100%;
  aspect-ratio: 1 / 1;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #d7dbe2 !important;
  border-radius: 10px !important;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  background-clip: padding-box;
  outline: none;
}

.s4a-shade-btn:hover{
  transform: translateY(-1px);
}

.s4a-shade-btn.is-selected{
  border-color: rgba(0,0,0,0.45) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.s4a-shade-help{
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.75;
}

/* Toggle rows */
.s4a-menu-toggles .s4a-menu-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.s4a-menu-toggles .s4a-menu-row:first-child{
  border-top: none;
}

.s4a-menu-row-label{
  font-size: 13px;
  font-weight: 600;
}

/* Switch */
.s4a-switch{
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
}

.s4a-switch input{
  opacity: 0;
  width: 0;
  height: 0;
}

.s4a-slider{
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #b8b8b8; /* off = grey */
  transition: 0.2s;
  border-radius: 999px;
}

.s4a-slider:before{
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background: white;
  transition: 0.2s;
  border-radius: 50%;
}

.s4a-switch input:checked + .s4a-slider{
  background: #2ecc71; /* on = green */
}

.s4a-switch input:checked + .s4a-slider:before{
  transform: translateX(20px);
}

/* ===== Shade colours on cells ===== */
.cell[data-s4a-shade]{
  /* keep text readable */
  color: inherit;
}

.cell.s4a-shade-purple{ background: rgba(193, 170, 255, 0.45) !important; }
.cell.s4a-shade-pink{ background: rgba(255, 183, 219, 0.45) !important; }
.cell.s4a-shade-green{ background: rgba(183, 255, 200, 0.45) !important; }
.cell.s4a-shade-brown{ background: rgba(225, 203, 169, 0.45) !important; }
.cell.s4a-shade-yellow{ background: rgba(255, 245, 170, 0.55) !important; }
.cell.s4a-shade-red{ background: rgba(255, 191, 191, 0.45) !important; }
.cell.s4a-shade-darkgreen{ background: rgba(168, 224, 198, 0.45) !important; }
.cell.s4a-shade-orange{ background: rgba(255, 215, 170, 0.45) !important; }
.cell.s4a-shade-beige{ background: rgba(245, 235, 210, 0.65) !important; }
.cell.s4a-shade-grey{ background: rgba(220, 220, 220, 0.55) !important; }

/* Shade button colours */
.s4a-shade-btn-purple{ background-color: rgba(193, 170, 255, 0.80) !important; }
.s4a-shade-btn-pink{ background-color: rgba(255, 183, 219, 0.80) !important; }
.s4a-shade-btn-green{ background-color: rgba(183, 255, 200, 0.80) !important; }
.s4a-shade-btn-brown{ background-color: rgba(225, 203, 169, 0.80) !important; }
.s4a-shade-btn-yellow{ background-color: rgba(255, 245, 170, 0.90) !important; }
.s4a-shade-btn-red{ background-color: rgba(255, 191, 191, 0.80) !important; }
.s4a-shade-btn-darkgreen{ background-color: rgba(168, 224, 198, 0.80) !important; }
.s4a-shade-btn-orange{ background-color: rgba(255, 215, 170, 0.80) !important; }
.s4a-shade-btn-beige{ background-color: rgba(245, 235, 210, 0.98) !important; }
.s4a-shade-btn-grey{ background-color: rgba(220, 220, 220, 0.88) !important; }

/* ===== Hide completed numbers ===== */
.numpad-btn.s4a-disabled{
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.2);
}

/* Make hamburger look consistent with existing control buttons */
#menu-button,
#menu-button-mobile{
  font-size: 20px;
  line-height: 1;
}

/* Force Copy button to use the Sudoku dark pill style (override theme/Elementor button styles) */
.s4a-copy-btn{
  color: #fff !important;
  border-color: rgba(255,255,255,0.10) !important;
  outline: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 10px 22px rgba(0,0,0,0.18) !important;
}

/* If any theme applies red hover/focus styles, neutralize them too */
.s4a-copy-btn:hover,
.s4a-copy-btn:focus,
.s4a-copy-btn:focus-visible{
  color: #fff !important;
  border-color: rgba(255,255,255,0.16) !important;
  outline: none !important;
}