/*
 * Styles for Praksisjordemoder Scan Kalender
 *
 * This stylesheet defines the layout and colours for the calendar
 * component. It aims to stay close to the existing site design with
 * soft pastel colours and clear typography. The calendar is responsive
 * and adjusts to smaller screens by stacking controls and enlarging
 * clickable areas.
 */

.pjsk-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 1.5rem 0;
  color: #1f2937;
  /* Prevent horizontal scrolling on small screens */
  overflow-x: hidden;
}

.pjsk-header h3 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: #111827;
}

.pjsk-header p {
  margin: 0.25rem 0 1rem 0;
  color: #374151;
}

/* Switch buttons */
.pjsk-switch {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.pjsk-switch-btn {
  border: 1px solid #f7a5c9;
  background: #ffe7f3;
  color: #000;
  padding: 0.4rem 0.8rem;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}
.pjsk-switch-btn.pjsk-active {
  background: #f7a5c9;
}

/* Input sections */
.pjsk-inputs {
  margin-bottom: 1rem;
}
.pjsk-input {
  margin-bottom: 0.75rem;
}
.pjsk-input label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}
.pjsk-input input[type='date'],
.pjsk-input select {
  padding: 0.4rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.9rem;
  width: 220px;
}
.pjsk-ga-selects {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.pjsk-ga-selects select {
  width: 80px;
}

/* Legend */
.pjsk-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.pjsk-legend-item {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #ffffff;
}
/* Tidlig scan – updated pastel colour */
.pjsk-legend-item.pjsk-tidlig {
  background-color: #c1d0bd;
  color: #1f2937;
}
/* Updated colours for tryghed, køn and new opned scan legend items */
.pjsk-legend-item.pjsk-tryghed {
  background-color: #669ef9;
  color: #ffffff;
}
.pjsk-legend-item.pjsk-koen {
  background-color: #ffe7f3;
  color: #1f2937;
}
.pjsk-legend-item.pjsk-opned {
  background-color: #f5e9e6;
  color: #1f2937;
}
.pjsk-legend-item.pjsk-d3d {
  background-color: #f472b6;
}

/* Calendar table */
.pjsk-month {
  width: 100%;
  border-collapse: collapse;
  /* margin removed; spacing now handled by the wrapper */
  margin-bottom: 0;
  /* Ensure cells divide the available width evenly and prevent tables
   * from growing wider than their container, especially on mobile. */
  table-layout: fixed;
}
.pjsk-month caption {
  text-align: left;
  font-weight: 700;
  margin-bottom: 0.25rem;
  font-size: 1rem;
  color: #111827;
  /* Capitalize the first letter of the month name (e.g. "Oktober") */
  text-transform: capitalize;
}
.pjsk-month th {
  background: #f3f4f6;
  color: #374151;
  padding: 0.3rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.85rem;
}
.pjsk-month td {
  border: 1px solid #e5e7eb;
  vertical-align: top;
  width: calc(100% / 7);
  height: 110px;
  padding: 0.2rem;
  box-sizing: border-box;
  position: relative;
  /* Allow long words (e.g. scanning names/prices) to wrap rather than
   * forcing the cell to expand. This prevents horizontal scrolling on
   * narrow screens. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.pjsk-month td.pjsk-empty {
  background: #f9fafb;
}
.pjsk-month td.pjsk-disabled-day {
  background: #f9fafb;
  color: #9ca3af;
}
.pjsk-month td.pjsk-active-day {
  cursor: pointer;
  background: #ffffff;
  transition: background-color 0.2s ease;
}
.pjsk-month td.pjsk-active-day:hover {
  background: #fef3f7;
}
.pjsk-daynum {
  font-weight: 700;
  margin-bottom: 0.15rem;
}
.pjsk-ga {
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0.15rem;
}
/* Stack scan badges vertically. We override the default gap so that
 * vertical spacing is controlled solely by margin on each badge.
 */
.pjsk-scans {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pjsk-scan {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  border-radius: 8px;
  font-size: 0.7rem;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
  line-height: 1.2;
}
/* Tidlig scan badge – updated pastel colour */
.pjsk-scan.pjsk-tidlig {
  background-color: #c1d0bd;
  color: #1f2937;
}
/* Updated colours for tryghed, køn and new opned scan badges */
.pjsk-scan.pjsk-tryghed {
  background-color: #669ef9;
  color: #ffffff;
}
.pjsk-scan.pjsk-koen {
  background-color: #ffe7f3;
  color: #1f2937;
}
.pjsk-scan.pjsk-d3d {
  background-color: #f472b6;
}
/* Op/Ned scan badge uses the same neutral grey as the option. */
.pjsk-scan.pjsk-opned {
  background-color: #d1d5db;
  color: #1f2937;
}
.pjsk-scan-name {
  display: block;
  font-weight: 600;
}
.pjsk-scan-price {
  display: block;
  font-size: 0.65rem;
}

/*
 * Limit the width of scanning badges inside the calendar cells.  By
 * default badges stretch to the full width of the cell, which can
 * look crowded.  Setting a percentage width (e.g. 80%) and
 * centering them leaves white space on either side for a calmer
 * layout.  We also add vertical margin above and below each badge
 * to control spacing between badges.  The margin values can be
 * adjusted as needed.
 */
.pjsk-scans .pjsk-scan {
  width: 80%;
  margin: 0.15rem auto;
}

/*
 * Large flag displayed on the terminsdato.  This element uses the
 * background and foreground colours defined for the flag (see
 * variables in the plugin) and is sized to stand out from regular
 * scanning badges.  The flag emoji is rendered via text content.
 */
.pjsk-flag-big {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  background-color: var(--pjsk-flag-bg, #dc2626);
  color: var(--pjsk-flag-fg, #ffffff);
  font-size: 1.4rem;
  line-height: 1;
}

/* Wrap for toggle buttons: aligns the toggle button to the right */
.pjsk-toggle-wrap {
  text-align: right;
}

/* Legacy toggle calendar button (unused in new versions). It remains for backward compatibility. */
.pjsk-toggle-calendar {
  margin-top: 0.75rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid #f7a5c9;
  background-color: #ffe7f3;
  color: #111827;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-block;
  /* No float: alignment handled by wrap */
}

/* Close button for each month. This appears below the month table aligned to the left. */
.pjsk-close-month {
  margin-top: 0.5rem;
  margin-left: 0;
  padding: 0.35rem 0.8rem;
  border: 1px solid #f7a5c9;
  background-color: #ffe7f3;
  color: #111827;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-block;
  align-self: flex-start;
}

/*
 * Scanning options list shown beneath the date selection inputs. Each scan
 * type has a checkbox and a coloured background corresponding to the scan
 * colours used in the calendar. Users can tick the scans they are
 * interested in. The list is vertically stacked.
 */
/*
 * Scanning options list shown beneath the date selection inputs.  On
 * desktop, options sit on the same line (horizontally) and wrap
 * naturally if there isn’t enough space.  On mobile screens, the
 * options stack vertically on their own lines.  Each option only
 * expands to the width of its content.
 */
.pjsk-options {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  /* Ensure children shrink to content width */
  align-items: flex-start;
}

/* Wrapper for each scan option. Applies base styling and delegates colour
 * to type-specific classes defined below. */
/*
 * Each scan option appears as an inline-flex box.  It only grows
 * to fit its text and stays aligned to the start of its row.  The
 * padding and rounded corners mirror the calendar badges.
 */
.pjsk-option {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  width: auto;
  flex: 0 0 auto;
}

/* Checkbox margin. Ensure the checkbox doesn't crowd the text. */
.pjsk-option input[type="checkbox"] {
  margin-right: 0.5rem;
}

/* Type-specific colours for options list. Reuse the colours defined
 * for scanning badges. If colours change in the future, update
 * values here to match. */
.pjsk-option.pjsk-tidlig {
  background-color: #c1d0bd;
  color: #1f2937;
}

.pjsk-option.pjsk-tryghed {
  background-color: #669ef9;
  color: #ffffff;
}

.pjsk-option.pjsk-koen {
  background-color: #ffe7f3;
  color: #1f2937;
  /* Add a dark pink border similar to the GA method switch */
  border: 1px solid #f7a5c9;
}

.pjsk-option.pjsk-d3d {
  background-color: #f472b6;
  color: #ffffff;
}

/* Op/Ned scanning option uses a neutral grey tone.  The colour
 * matches the grey used elsewhere in the calendar for neutral
 * elements. */
.pjsk-option.pjsk-opned {
  background-color: #d1d5db;
  color: #1f2937;
}

/* New month container wraps the month table and its close button */
/* Month container holds the calendar table and its close button.  */
.pjsk-month-container {
  /* Stack table and button vertically */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}
.pjsk-month-container .pjsk-month {
  width: 100%;
}
.pjsk-month-container .pjsk-toggle-calendar {
  /* Place the button below the month table */
  margin-left: 0;
  margin-top: 0.5rem;
  align-self: flex-start;
}

/*
 * Calendar wrapper positions the toggle button on top of the calendar
 * content. The button is absolutely positioned to the right of the
 * calendar without creating an extra column. On small screens, the
 * button becomes part of the normal flow below the calendar.
 */
.pjsk-calendar-wrapper {
  position: relative;
  margin-top: 0.5rem;
}
.pjsk-calendar-wrapper .pjsk-months {
  /* ensure the calendar uses the full width */
  width: 100%;
}
.pjsk-calendar-wrapper .pjsk-toggle-calendar {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  /* prevent the button from covering content horizontally */
  white-space: nowrap;
}

@media (max-width: 640px) {
  /* On small screens, place the toggle button below the calendar */
  .pjsk-calendar-wrapper .pjsk-toggle-calendar {
    position: static;
    margin-top: 0.5rem;
  }
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .pjsk-switch {
    flex-direction: column;
    gap: 0.3rem;
  }
  .pjsk-input input[type='date'],
  .pjsk-input select {
    width: 100%;
  }
  .pjsk-month td {
    height: 120px;
  }
}
/* Hide scan options list (checkboxes) per request; keep calendar markers visible */
.pjsk-options { display: none !important; }