/*
  Base global styles shared across the entire report. These rules set
  foundational colours, typography and table layout using a dark theme. If
  you wish to adjust the look of all sections at once, edit this file.
*/

/*
  Base layout for the entire application.

  Combine the dark theme definitions with platform‑specific adjustments
  so there is a single body rule instead of multiple overlapping ones.
  The -webkit-text-size-adjust property keeps font sizes consistent on
  mobile Safari without conflicting duplicate declarations.
*/
body {
    background-color: #2c2c34 !important;
    color: #ffffff !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 20px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

/*
 * Ensure that the vehicle photo in the intro section scales nicely
 * within its container. Without these rules the uploaded photo
 * would often overflow the container or be cropped awkwardly on
 * smaller screens. By stretching the image to fill both width
 * and height and using object‑fit, the aspect ratio is preserved
 * and the entire image remains visible. If your design relies on
 * cropping instead of fitting the whole image, change `contain`
 * to `cover`.
 */
.photo-upload img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
h1, h2, h3 {
    color: #ffffff;
    text-align: center;
    margin-top: 0;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background-color: #3a3a47;
    color: #ffffff;
}
th, td {
    border: 1px solid #555;
    padding: 12px 15px;
    text-align: left;
    background-color: #2f2f38;
    color: #ffffff;
}
tr:nth-child(even) {
    background-color: #2f2f38;
}
input[type="text"],
input[type="date"],
textarea {
width: auto;
    background-color: #1e1e24;
    color: #ffffff;
    border: 2px solid #777;
    border-radius: 10px;
    font-size: 14px;
    padding: 10px 12px;
}
input[type="radio"] {
    transform: scale(1.2);
    margin: 0 5px;
}
label {
    margin-right: 10px;
    color: #ffffff;
}
.section-divider {
    background: #266b9d;
    font-weight: bold;
    color: #ffffff;
    font-size: 21px;
    padding: 12px;
    margin: 40px 0 20px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    text-align: center;
}
button, .add-row-btn {
    background-color: #a73014;
    color: #ffffff;
    border: none;
    padding: 12px 20px;
    margin: 20px 0;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
}
button:hover, .add-row-btn:hover {
    background-color: #0056b3;
}
img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

/* ==========================
   PHOTO PREVIEW – ADMIN UPLOAD
========================== */

.photo-thumb {
  position: relative;
  display: inline-block;
  margin-right: 6px;
  margin-bottom: 6px;
}

.photo-thumb img {
  max-width: 120px;
  border-radius: 8px;
  display: block;
}

.photo-thumb .remove-photo {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #c0392b;
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(0,0,0,.4);
  transition: transform .15s ease, opacity .15s ease;
}

.photo-thumb .remove-photo:hover {
  transform: scale(1.1);
  opacity: 0.9;
}

/* ----- Mobile defaults & utilities (added) ----- */
:root {
  --space-1: .5rem;
  --space-2: 1rem;
  --card-w: 260px; /* default width for tyre cards on desktop */
}

html {
  scroll-behavior: smooth;
}


.jc-container {
  padding-inline: min(4vw, 24px);
}

/* Larger tap targets on mobile */
button,
.gp-dot,
.pg-dot,
.tire-card .input-group input {
  min-height: 44px;
}

/* Enlarged close buttons for modals and overlays */
.image-overlay .close,
.modal .close {
  width: 44px;
  height: 44px;
  font-size: 28px;
  line-height: 44px;
}

/* Ensure all images scale properly */
    cursor: zoom-in;
    max-width: 400px;
    height: auto;
}
}


/* --- JC Rating (interiér) --- */
.jc-rating{ display:flex; gap:.4rem; align-items:center; margin-left:auto; }
body.jc-view .jc-public-media::before,
body.jc-view .jc-public-media::after { display:none !important; }
body.jc-view .jc-public-media[hidden],
body.jc-view input[hidden] { display:none !important; }
.jc-rating button{
  border:0; background:none; cursor:pointer; font-size:1.1rem; line-height:1; padding:.2rem;
}
.jc-rating .star{ color:#d0d0d0; transition:transform .05s ease; }
.jc-rating .star.active{ color:#f08a24; }
.jc-rating button:focus-visible{ outline:2px solid #8ab4f8; border-radius:.25rem; }
@media (max-width:680px){
  .jc-rating{ gap:.2rem; }
  .jc-rating button{ font-size:1rem; }
}



/* JustCar logo header section */
.justcar-logo-section {
    margin-bottom: 20px;
}

.justcar-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.justcar-logo-wrapper img {
    max-width: 220px;
    height: auto;
    display: block;
}

/*
  Desktop styling for accordion toggle buttons (jc-acc-toggle).
  On wider screens these toggles should not inherit the generic button
  padding/margins. Instead they use dark backgrounds, subtle borders and
  flexbox to align the title with the counters on the right.
*/

.jc-acc-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start; 
  width: 100%;
  padding: 12px 16px;
  margin: 10px 0;
  background-color: #2f2f38;
  border: 1px solid #555;
  border-radius: 6px;
  color: #ffffff;
  font-size: 16px;
  gap: 8px; 
}

/* Counters inside toggle align to the far right and have slightly smaller text */
.jc-acc-toggle .jc-acc-counters {
  margin-left: auto;
  font-size: 14px;
}

/*
  ========================================================
  Desktop alignment for checklist and service rows

  On wider screens, keep each checklist row aligned horizontally:
  the icon/button, label, note field and file upload should sit
  neatly on one line. We define flexbox containers for the
  relevant lists (jc-checklist, pneu-checklist, lights-checklist,
  body-checklist) as well as service-grid rows. Labels take a
  fixed width to align nicely, note inputs flex to fill the
  remaining space, and file inputs have a sensible fixed width.
  These rules apply to desktop; mobile overrides remain below.
*/

/*
  Shared row styling for all checklist and grid items

  The following selectors target the various list items used
  throughout the protocol (e.g. general jc items, pneu items,
  lights items, body items) as well as service rows. By grouping
  these selectors together we ensure each row uses the same
  horizontal flexbox layout and receives a consistent card-like
  appearance (background, border and border‑radius).  This helps
  unify the visual style across otherwise distinct accordions.
*/

/* Labels on the left take up a fixed amount of space on desktop */
.jc-item .jc-label,
.lights-item-label,
.body-item-label,
.service-grid label {
  flex: 0 0 260px;
}

/* Fix width for the "Lak vozu" label so that it aligns
   with other checklist labels on desktop */
.lak-label {
  flex: 0 0 260px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Note inputs expand to fill available space */
.jc-note,
.lights-note,
.body-note,
.service-row input {
  flex: 1 1 auto;
  max-width: 100%;
  box-sizing: border-box;
    /* Provide a reasonable minimum height so that short notes don’t
       collapse to a single line on larger screens. This helps
       maintain a consistent row height across different accordions. */
    min-height: 40px;
}

/* Lak-items container (Oděrky na laku) should expand
   to fill remaining space and align its children horizontally */
.lak-items {
  flex: 1 1 auto;
  display: grid;
  align-items: center;
  gap: 8px;
}

/* Group notes and photo inputs on the same line for consistency */
.pneu-note-wrap,
.lights-file,
.body-file {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
}

/* File inputs get a reasonable fixed width on desktop */
.pneu-file,
.lights-file,
.body-file {
  /* Give file inputs a smaller fixed width on desktop. Narrowing
     the width prevents the entire row from sliding to the right
     on larger screens when long labels are present. */
  flex: 0 0 180px;
  max-width: 200px;
}

/* =========================================
   MOBILE TUNING – max 768px
   ========================================= */
@media (max-width: 768px) {

  body.jc {
    padding: 8px;
    font-size: 15px;
  }

  /* Logo + horní sekce */
  .justcar-logo-section {
    padding: 8px 0 4px;
  }
  .justcar-logo-wrapper img {
    max-width: 160px;
  }

  /* Úvod vozu – fotka + karta pod sebe */
  .car-intro-section {
    padding: 8px 10px;
  }
  .car-intro-wrapper {
    flex-direction: column;
    gap: 10px;
  }
  .photo-upload {
    width: 100%;
    min-height: 180px;
  }
  .vehicle-details {
    width: 100%;
    padding: 12px;
  }
  .details-list .detail-item {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Oddělovač sekcí */
  .section-divider {
    margin: 18px 0 8px;
    padding: 8px 10px;
    font-size: 16px;
  }

  /* Akordeony – menší padding, vše na šířku */
  .jc-drive {
    margin: 6px 0;
  }
  .jc-acc-toggle {
    padding: 10px 12px;
    font-size: 15px;
    gap: 8px;
  }
  .jc-acc-counters {
    font-size: 13px;
  }

  .jc-acc-panel {
    padding: 8px 10px 12px;
  }

  /* Každá položka checklistu na řádek */
  .jc-checklist .jc-item,
  .pneu-checklist .jc-item,
  .lights-checklist .lights-check-item,
  .body-checklist .body-check-item,
  .service-grid .service-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .jc-item .jc-label,
  .jc-item label,
  .lights-item-label,
  .body-item-label,
  .service-grid label {
    width: 100%;
  }

  .jc-note,
  .lights-note,
  .body-note,
  .service-row input,
  .test-drive-info-section input,
  .test-drive-info-section textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* „pneu-note-wrap“ – text vlevo, fotka pod ním */
  .pneu-note-wrap,
  .body-file,
  .lights-file {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }
  .pneu-note-wrap input.jc-note {
    flex: 1 1 auto;
    /* Allow the tyre note input to grow on wider screens; without
       this the field could end up extremely narrow when the file
       input occupies most of the row. */
    width: 100%;
    max-width: none;
  }
  .pneu-file,
  .body-file,
  .lights-file {
    flex: 0 0 100%;
  }
  .pneu-preview,
  .body-preview,
  .lights-preview {
    width: 100%;
  }

  /* Fotky vozu – 2 sloupce na výšku, 1 na šířku */
  .photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .photo-grid .photo-slot {
    min-height: 110px;
  }
  @media (max-width: 480px) {
    .photo-grid {
      grid-template-columns: 1fr;
    }
  }

  /* Hodnocení exteriéru/interiéru – hvězdy se zalomí */
  .hodnoceni-exterieru-vozu-section,
  .hodnoceni-interieru-vozu-section {
    padding: 10px;
  }
  .hodnoceni-exterieru-vozu-section h2,
  .hodnoceni-interieru-vozu-section h2 {
    font-size: 17px;
  }
  .hodnoceni-exterieru-vozu-section .star-rating,
  .hodnoceni-interieru-vozu-section .star-rating {
    font-size: 20px;
    flex-wrap: wrap;
  }

  /* VIN / OBD grid trochu víc „pod sebe“ */
  .vin-grid,
  .obd-container,
  .service-grid {
    gap: 8px;
  }
  .vin-grid .vin-row,
  .service-grid .service-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .vin-grid label,
  .service-grid label {
    width: 100%;
    margin-bottom: 2px;
  }

  /* Tlačítko Uložit protokol – full width na mobilu */
  #ulozit-protokol button,
  button.save-protocol,
  button#ulozit_protokol {
    width: 100%;
    justify-content: center;
  }
}