/* Custom Styles for eSudoku.fr - Overriding and Extending Bootstrap */

:root {
  --primary-color: #007bff; /* Bootstrap blue, good starting point */
  --secondary-color: #6c757d;
  --light-gray: #f8f9fa;
  --dark-gray: #343a40;
  --grid-bg: #e9ecef;
  --cell-bg: #ffffff;
  --cell-border: #dee2e6;
  --block-border: #6c757d; /* Thicker border for 3x3 blocks */
  --given-cell-bg: #f1f3f5;
  --given-cell-color: #212529;
  --focus-cell-bg: #cfe2ff; /* Light blue for focus */
  --incorrect-cell-bg: #f8d7da; /* Light red for incorrect */
  --selected-number-bg: #cce5ff;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--light-gray);
}

/* Header */
.site-header .navbar-brand {
  font-weight: 700;
}
.site-header .navbar-brand span {
  font-weight: 400;
  color: var(--secondary-color);
}
.site-header .nav-link {
  font-weight: 500;
}
.site-header .nav-link.active {
  color: var(--primary-color) !important;
  font-weight: 700;
}

/* Hero Section */
.hero {
  background-color: var(--cell-bg);
  border-bottom: 1px solid var(--cell-border);
}

/* Game Area & Toolbar */
.game-area {
  max-width: 600px; /* Limit max width */
}

.toolbar {
  background-color: var(--cell-bg);
  border-radius: 0.5rem;
}

.toolbar .form-select-sm {
  font-size: 0.9rem;
}

.toolbar .btn-sm {
  font-size: 0.9rem;
}

/* Sudoku Grid - Key Styling */
.sudoku-grid {
  --cell-size: min(8vw, 50px); /* Responsive cell size, max 50px */
  display: grid;
  grid-template-columns: repeat(9, var(--cell-size));
  grid-template-rows: repeat(9, var(--cell-size));
  gap: 1px; /* Thin grid lines */
  background-color: var(--block-border); /* Use block border color for grid lines */
  border: 2px solid var(--block-border);
  width: calc(9 * var(--cell-size) + 8 * 1px + 4px); /* Calculate exact width */
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden; /* Ensures borders look clean */
}

.sudoku-grid input {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: calc(var(--cell-size) * 0.5); /* Responsive font size */
  font-weight: 500;
  border: none;
  padding: 0;
  background-color: var(--cell-bg);
  color: var(--primary-color); /* Color for user input */
  outline: none; /* Remove default outline */
  caret-color: transparent; /* Hide cursor */
  transition: background-color 0.1s ease-in-out;
}

/* Style for pre-filled numbers */
.sudoku-grid input:disabled {
  background-color: var(--given-cell-bg);
  color: var(--given-cell-color);
  font-weight: 700;
  cursor: not-allowed;
}

/* Style for focused cell */
.sudoku-grid input:focus {
  background-color: var(--focus-cell-bg);
  position: relative; /* Needed for potential ::after pseudo-elements */
  z-index: 10;
}

/* Style for incorrect cells (to be added via JS) */
.sudoku-grid input.incorrect {
    background-color: var(--incorrect-cell-bg);
    color: #842029;
}

/* Thick borders for 3x3 blocks */
.sudoku-grid input:nth-child(3n) {
   border-right: 2px solid var(--block-border);
}
.sudoku-grid input:nth-child(9n) {
   border-right: none; /* Remove default thin border */
}
.sudoku-grid input:nth-child(n+19):nth-child(-n+27),
.sudoku-grid input:nth-child(n+46):nth-child(-n+54) {
  border-bottom: 2px solid var(--block-border);
}

/* Ensure outer borders are consistent */
.sudoku-grid input:nth-child(-n+9) { border-top: none; }
.sudoku-grid input:nth-child(n+73) { border-bottom: none; }
.sudoku-grid input:nth-child(9n+1) { border-left: none; }

/* Style for the selected cell */
.sudoku-grid input.selected {
    background-color: #e0f7ff; /* Light blue background for selection */
    box-shadow: inset 0 0 0 2px var(--bs-primary); /* Optional: blue border inside */
}

/* Style for highlighted row/column on hover */
.sudoku-grid input.highlight {
  background-color: #e0f2ff; /* Light blue, same as selected */
}

/* Style for hinted cells (flash effect) */
@keyframes flash {
  0%, 100% { background-color: #fff3cd; } /* Bootstrap warning background */
  50% { background-color: inherit; }
}
.sudoku-grid input.hinted {
  animation: flash 0.5s ease-in-out;
}

/* Footer */
.site-footer {
  padding-top: 2rem;
  padding-bottom: 1rem;
}

.site-footer h5 {
  color: #fff;
}

.site-footer a {
  color: #adb5bd; /* Lighter gray for links */
  transition: color 0.2s ease-in-out;
}

.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.site-footer .small {
  color: #6c757d;
}

.site-footer .border-top {
 border-color: #495057 !important; /* Darker border in footer */
}

/* Responsive Adjustments */
@media (max-width: 576px) {
  .sudoku-grid {
    --cell-size: min(10vw, 35px); /* Smaller cells on small screens */
  }
  .sudoku-grid input {
      font-size: calc(var(--cell-size) * 0.6);
  }
  .toolbar {
      flex-direction: column;
      align-items: stretch !important;
  }
  .toolbar .form-select-sm,
  .toolbar .btn {
      width: 100%;
      margin-bottom: 0.5rem;
  }
  .toolbar .btn:last-child {
      margin-bottom: 0;
  }
}

/* Basic Page Styles (FAQ, Rules, etc.) */
.container h1 {
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}
.container .lead {
    color: var(--secondary-color);
}
.accordion-button:not(.collapsed) {
    color: var(--primary-color);
    background-color: #e7f1ff;
}

/* Print Page Specifics (placeholder) */
.card {
    border: 1px solid var(--cell-border);
}

/* Add specific class for fixed cells */
.sudoku-cell.fixed {
  background-color: #e9ecef; /* Light grey background */
  font-weight: bold;
}

/* Style for incorrect cells */
.sudoku-cell.incorrect {
    background-color: #f8d7da; /* Light red */
    color: #721c24; /* Dark red text */
}

/* Style for the printable grid container */
.sudoku-grid-printable {
    max-width: 500px; /* Adjust as needed */
    margin-bottom: 20px;
}

/* Style for the table used in printing (and now web view base) */
.sudoku-print-table {
    width: 100%; /* Take full width of its container */
    max-width: 450px; /* Max width for web view */
    margin: 0 auto 20px auto; /* Center the table and add bottom margin */
    border-collapse: collapse;
    font-size: 18px;
}

.sudoku-print-table td {
    border: 1px solid #ccc; /* Light grey borders */
    text-align: center;
    vertical-align: middle;
    font-family: sans-serif;
    width: 50px; /* Fixed size for web view (450px / 9) */
    height: 50px; /* Fixed size for web view */
}

/* Inner div to correctly position content within the padding-hacked cell */
.cell-content {
    font-size: inherit;
    line-height: 1;
}

/* Thicker borders for 3x3 blocks */
.sudoku-print-table tr.thick-top-border > td {
    border-top: 3px solid black;
}
.sudoku-print-table td.thick-left-border {
    border-left: 3px solid black;
}
/* Ensure bottom and right borders of the grid are thick too */
.sudoku-print-table tr:last-child td {
     border-bottom: 3px solid black;
}
.sudoku-print-table td:last-child {
     border-right: 3px solid black;
}
.sudoku-print-table tr:first-child td {
     border-top: 3px solid black;
}
.sudoku-print-table td:first-child {
     border-left: 3px solid black;
}

/* Wrapper for each printable grid */
.grid-wrapper {
    margin-bottom: 40px; /* Space below each grid */
    page-break-inside: avoid; /* Try to keep title and grid together on print */
}

/* Title for each printable grid */
.grid-title {
    text-align: center;
    margin-bottom: 10px;
    font-size: 1.1rem;
    font-weight: bold;
}

/* --- Game Controls Panel Styles (New) --- */

.game-controls {
    /* background-color is set via class bg-light */
    /* padding is set via class p-3 */
    /* border-radius is set via class rounded */
    border: 1px solid #dee2e6; /* Light border */
}

#mistakes-status,
#timer-status {
    font-size: 0.9rem;
    font-weight: 500;
}

#timer-status button {
    padding: 0.1rem 0.3rem;
    font-size: 0.7rem;
    line-height: 1;
}

.btn-control {
    width: 50px; /* Adjust size as needed */
    height: 50px;
    font-size: 1.2rem;
    display: inline-flex; /* Use flex for centering icon */
    align-items: center;
    justify-content: center;
    padding: 0; /* Remove default padding */
    border-radius: 50%; /* Circular buttons */
}

#hint-badge {
    font-size: 0.7rem;
    padding: 0.2em 0.4em;
    /* Positioning is done via Bootstrap classes */
}

/* Style for active Notes button */
#notes-button[aria-pressed="true"] {
    background-color: #0d6efd; /* Bootstrap primary color */
    border-color: #0d6efd;
    color: #fff;
}

.btn-number {
    /* Font size and padding already set by btn-lg */
    /* aspect-ratio: 1 / 1; /* Enforce square buttons */
    /* Let's rely on Bootstrap's grid and button styles first */
    font-weight: 500;
}

/* --- Sudoku Grid Specific Styles --- */
.sudoku-grid {
    display: grid;
    --cell-size: min(8vw, 50px); /* Responsive cell size, max 50px */
    grid-template-columns: repeat(9, var(--cell-size));
    grid-template-rows: repeat(9, var(--cell-size));
    gap: 1px; /* Thin grid lines */
    background-color: var(--block-border); /* Use block border color for grid lines */
    border: 2px solid var(--block-border);
    width: calc(9 * var(--cell-size) + 8 * 1px + 4px); /* Calculate exact width */
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden; /* Ensures borders look clean */
}

/* Reset inner div styles for print if needed */
.cell-content {
    position: static; /* Reset position */
    display: flex; /* Use flexbox for centering */
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    width: 100%; /* Ensure it fills cell */
    height: 100%; /* Ensure it fills cell */
}

/* --- Print Specific Styles --- */
@media print {
    body * {
        visibility: hidden; /* Hide everything by default */
    }

    .printable-area, .printable-area * {
        visibility: visible; /* Show only the printable area and its children */
    }

    .printable-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 10mm; /* Add some margin for printing */
        box-shadow: none; /* Remove shadows */
    }

    #printable-sudoku-container {
        width: 100%;
        max-width: none;
    }

    /* Add constraints and centering to the table itself for printing */
    .sudoku-print-table {
        max-width: 180mm;
        width: 180mm; /* Fixed width for print */
        margin: 0 auto 15mm auto; /* Center horizontally, add bottom margin */
    }

    /* Define exact cell size for printing, overriding padding hack */
    .sudoku-print-table td {
        width: 20mm;
        height: 20mm; /* Restore fixed height */
        padding: 0; /* Reset padding */
        position: static; /* Reset positioning */
        box-sizing: border-box;
        border: 1px solid #ccc;
        text-align: center;
        vertical-align: middle;
        font-family: sans-serif; 
        font-size: 16px; /* Adjust font size if needed */
    }

    /* Reset inner div styles for print if needed */
    .cell-content {
        position: static; /* Reset position */
        display: flex; /* Use flexbox for centering */
        align-items: center; /* Vertical centering */
        justify-content: center; /* Horizontal centering */
        width: 100%; /* Ensure it fills cell */
        height: 100%; /* Ensure it fills cell */
    }

    /* Adjust title style for print */
    .grid-title {
        font-size: 14pt;
        margin-bottom: 5mm;
    }

    /* Adjust wrapper margin for print */
    .grid-wrapper {
        margin-bottom: 15mm;
    }

    /* Hide the 'Print' button itself when printing */
    .print-button-container {
        display: none;
    }

    /* Optional: remove page margins set by browser */
    @page {
      size: A4; /* Or 'letter' */
      margin: 1cm;
    }
}