/* 
██████   █████  ██████  ██   ██     ████████ ██   ██ ███████ ███    ███ ███████ 
██   ██ ██   ██ ██   ██ ██  ██         ██    ██   ██ ██      ████  ████ ██      
██   ██ ███████ ██████  █████          ██    ███████ █████   ██ ████ ██ █████   
██   ██ ██   ██ ██   ██ ██  ██         ██    ██   ██ ██      ██  ██  ██ ██      
██████  ██   ██ ██   ██ ██   ██        ██    ██   ██ ███████ ██      ██ ███████ 
*/

/* Dark Mode Customization */
html[data-bs-theme="dark"] {
    /* Entry box colors */
    --entry-box-even-bg: var(--bs-gray-900); /* Dark gray for even entries */
    --entry-box-odd-bg: var(--bs-gray-800);  /* Lighter gray for odd entries */

    /* Link colors */
    --download-link-color: #ffffff; /* White for links in dark mode */
}

/* Entry Box Styling for Dark Mode */
html[data-bs-theme="dark"] .entry-box:nth-child(even) {
    background-color: var(--entry-box-even-bg); /* Dark theme color for even entries */
}
html[data-bs-theme="dark"] .entry-box:nth-child(odd) {
    background-color: var(--entry-box-odd-bg); /* Dark theme color for odd entries */
}

/* Week Separators in Dark Mode */
html[data-bs-theme="dark"] .weekSeparator.custom-week-header {
    background-color: #efadce;
    padding: 0.5em 1em;
    text-align: center;
    margin: 1em 0;
}

/* var(--bs-gray-800); */

html[data-bs-theme="dark"] .custom-week-title,
html[data-bs-theme="dark"] .custom-week-range {
    color: #000; /* Light text for readability on dark background */
}

html[data-bs-theme="dark"] .custom-card.card {
    background-color: #2a2d31; /* Tumma neutraali */
    transition: all 0.3s ease;
    border-radius: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

html[data-bs-theme="dark"] .custom-card.card:hover {
    background-color: #343a40; /* Kirkkaampi hover-tausta */
    transform: scale(1.02);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* color: #e0e0e0;  */
/* Light text for readability on dark background */

/*    ____  ____   _________   ____    ____    _____                        */
/*   |_   ||   _| |  _   _  | |_   \  /   _|  |_   _|                       */
/*     | |__| |   |_/ | | \_|   |   \/   |      | |                         */
/*     |  __  |       | |       | |\  /| |      | |   _                     */
/*    _| |  | |_     _| |_     _| |_\/_| |_    _| |__/ |                    */
/*   |____||____|   |_____|   |_____||_____|  |________|                    */
/*                                                                          */
/*      ___             ___                      _                          */
/*    .' _ '.         .' ..]                    / |_                        */
/*    | (_) '___     _| |_     .--.     .--.   `| |-'  .---.   _ .--.       */
/*    .`___'/ _/    '-| |-'  / .'`\ \ / .'`\ \  | |   / /__\\ [ `/'`\]      */
/*   | (___)  \_      | |    | \__. | | \__. |  | |,  | \__.,  | |          */
/*   `._____.\__|    [___]    '.__.'   '.__.'   \__/   '.__.' [___]         */


html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.content-wrap {
    flex: 1 0 auto;
}

.footer {
    flex-shrink: 0;
}


.icon-link .pencil-icon {
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out; /* Smooth transition for transform, color, and opacity */
    color: lightgrey; /* Default color for pencil icon */
    opacity: 0.2; /* Start with a lower opacity */
}

.icon-link:hover .pencil-icon {
    transform: translateY(-0.25rem); /* Moves icon slightly up */
    color: #62c370; /* Pleasant pastel green on hover */
    opacity: 1.0; /* Full opacity on hover */
}


/* Buttons used in the index.php to accept and reject users*/

.user-activation-buttons {
    border: none;
    background: none;
    color: inherit;
    font-size: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    height: 100%;
    transition: transform 0.3s ease-in-out, height 0.3s ease-in-out;
}

.user-activation-buttons:hover {
    transform: translateY(-10%);
}

/* Apply the color to the download-link-text class */
.download-link-text {
    color: var(--download-link-color);
}

/* Color for plant status square */
.status-dot {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  border-radius: 3px;
  background-color: #ccc;
  margin-right: 0.4em;
  vertical-align: text-bottom;
  position: relative;
  top: -1px;
}

.btn-water:hover i {
  color: white;
}

.btn-fert:hover i {
  color: #dddddd;
}

.icon-lg {
    transform: scale(2);
    display: inline-block;
    margin-top: -4px;
    vertical-align: middle;
    line-height: 1;
}

.ec-text-button {
  transform: scale(1.5);
  display: inline-block;
  margin-top: -2px;
  vertical-align: middle;
  line-height: 1;
  font-weight: bold;
  color: #39ff14 !important;
}

.ec-text-button:hover {
  text-shadow: 0 0 6px #39ff14;
  cursor: pointer;
}

/* Punainen pallo: aina himmeänä (opacity 0.4), ei vilkkumista */
.flowering-status.text-danger.bi-circle-fill {
  opacity: 0.4;
  animation: none;
}

/* Vihreä pallo: staattinen, neonvihreä hehku */
.flowering-status.text-success.bi-circle-fill,
.flowering-status.green-blink {
  opacity: 1;
  color: #39ff14;               /* neonvihreä */
  filter: drop-shadow(0 0 4px #39ff14);
  animation: none;
}

/* Keltainen vilkkuva pallo: varjo vain kirkkaana osuudella */
@-webkit-keyframes blink-yellow {
  0%, 70% { 
    opacity: 1; 
    filter: drop-shadow(0 0 4px #ffc107);
  }
  70%, 100% { 
    opacity: 0.5; 
    filter: none;
  }
}
@keyframes blink-yellow {
  0%, 70% { 
    opacity: 1; 
    filter: drop-shadow(0 0 4px #ffc107);
  }
  70%, 100% { 
    opacity: 0.5; 
    filter: none;
  }
}

.flowering-status.yellow-blink,
.flowering-status.text-warning.bi-circle-fill {
  color: #ffc107; /* bootstrapin warning-väri */
  -webkit-animation: blink-yellow 1s steps(1,end) infinite;
          animation: blink-yellow 1s steps(1,end) infinite;
}

/* ─── Badge-status CSS ─── */

/* Punainen badge: aina himmeänä, ei animaatiota */
.badge-status-danger {
  background-color: #dc3545; /* sama kuin .bg-danger */
  opacity: 0.4;
  color: #fff;
}

/* Keltainen badge: välkkyvä, varjo kirkkaana */
@keyframes blink-warning {
  0%, 70% {
    opacity: 1;
    filter: drop-shadow(0 0 4px #ffc107);
  }
  70%, 100% {
    opacity: 0.5;
    filter: none;
  }
}

.badge-status-warning {
  background-color: #ffc107; /* sama kuin .bg-warning */
  color: #212529;            /* sama kuin .text-dark */
  animation: blink-warning 1s steps(1,end) infinite;
}

/**
 * Styles for rendering a dynamic "stamp" overlay label (e.g., "Archived") centered on screen content.
 *
 * Includes blinking red animation, responsive scaling, and absolute positioning
 * for use as a decorative alert or status indicator over content (such as images or headers).
 *
 * Components:
 * 
 * 1. @keyframes blink-red
 *    - Creates a blinking effect with red drop shadow.
 *    - 70% of each cycle is fully visible with a glow, followed by 30% dimmer without shadow.
 *    - Used for subtle yet attention-drawing emphasis.
 *
 * 2. .position-relative
 *    - Utility class to define a relative positioning context for child elements (e.g., .stamp-overlay-danger).
 *    - Required on the container of the overlay for absolute positioning to behave correctly.
 *
 * 3. .stamp-overlay-danger
 *    - Absolutely positioned stamp overlay with:
 *        - Center alignment (horizontal and vertical).
 *        - Rotated -23 degrees to resemble a physical stamp.
 *        - Red text and border with light background.
 *        - Drop shadow for glowing effect.
 *        - Bold, large text to ensure visibility.
 *        - Blinking animation via `blink-red`.
 *        - Responsive scaling via media queries.
 *        - Non-interactive (pointer-events disabled).
 *
 * 4. Media Queries (Responsive Scaling)
 *    - Adjusts the `scale()` transform value at each Bootstrap breakpoint.
 *    - Ensures the overlay is appropriately sized across different screen widths:
 *        - ≥576px: scale(1.5)
 *        - ≥768px: scale(1.8)
 *        - ≥992px: scale(1.3)
 *        - ≥1200px: scale(1.4)
 *        - ≥1400px: scale(1.5)
 *
 * Usage:
 * - Place `.position-relative` on the parent container.
 * - Insert the `.stamp-overlay-danger` element inside to overlay a blinking red label.
 * 
 * Example:
 * <div class="position-relative">
 *   <img src="..." alt="..." />
 *   <span class="stamp-overlay-danger">Archived</span>
 * </div>
 */

@keyframes blink-red {
  0%, 70% {
    opacity: 0.5;
    filter: drop-shadow(0 0 6px #dc3545);
  }
  70%, 100% {
    opacity: 0.3;
    filter: none;
  }
}

.position-relative {
  position: relative;
}

.stamp-overlay-danger {
  position: absolute;
  max-width: 400px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0%) rotate(-23deg) scale(1.3);
  z-index: 10;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  color: #dc3545;
  background-color: rgba(255, 255, 255, 0.85);
  padding: 0.5rem 1.2rem;
  border: 4px solid #dc3545;
  border-radius: 0.5rem;
  box-shadow: 0 0 4px rgba(220, 53, 69, 0.5);
  animation: blink-red 1s steps(1, end) infinite;
  pointer-events: none;
}

/* Skaalaus responsiivisesti */

@media (min-width: 576px) {
  .stamp-overlay-danger {
    transform: translate(-50%, 0%) rotate(-23deg) scale(1.5);
  }
}

@media (min-width: 768px) {
  .stamp-overlay-danger {
    transform: translate(-50%, 0%) rotate(-23deg) scale(1.8);
  }
}

@media (min-width: 992px) {
  .stamp-overlay-danger {
    transform: translate(-50%, 0%) rotate(-23deg) scale(1.3);
  }
}

@media (min-width: 1200px) {
  .stamp-overlay-danger {
    transform: translate(-50%, 0%) rotate(-23deg) scale(1.4);
  }
}

@media (min-width: 1400px) {
  .stamp-overlay-danger {
    transform: translate(-50%, 0%) rotate(-23deg) scale(1.5);
  }
}


/**
 * Visual representation of EC value trend arrows.
 *
 * .arrow-icon
 *   Shared styles for all arrow icons.
 *   - Smooth transition for directional changes.
 *   - Fixed size of 1.2rem.
 *
 * .trend-up
 *   Positive trend (EC value is increasing).
 *   - Green color (#28a745).
 *   - Arrow points upward (0° rotation).
 *
 * .trend-down
 *   Negative trend (EC value is decreasing).
 *   - Red color (#dc3545).
 *   - Arrow points downward (180° rotation).
 *
 * .trend-flat
 *   Stable trend (change is minimal).
 *   - Gray color (#6c757d).
 *   - Arrow points sideways (90° rotation).
 */

.arrow-icon {
  display: inline-block;
  transition: transform 0.2s;
  font-size: 1.2rem;
  transform-origin: center;
}

.trend-up {
  color: #28a745;
  transform: rotate(45deg);
}

.trend-down {
  color: #dc3545;
  transform: rotate(135deg);
}

.trend-flat {
  color: #6c757d;
  transform: rotate(90deg);
}

/* CSS for the flashing traffic warning icon */
@keyframes traffic-warning-flash {
  0% {
    opacity: 1;
    color: #FFFF00; /* Neon yellow color */
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    color: #FFFF00; /* Neon yellow color */
  }
}

.traffic-warning {
  animation: traffic-warning-flash 1s infinite; /* 1s duration with infinite loop */
  display: inline-block;
}

.status-timeline-chart-container {
  max-width: 100%;
  /* Sallii sekä pysty- että vaakaylivuodon */
  overflow: visible;
}

/* CSS: oletuskorkeus 80px, lg ja alle 150px */
.status-timeline-chart {
  height: 300px !important;
}

@media (max-width: 992px) {
  .status-timeline-chart {
    height: 150px !important;
  }
}

.switch-big .form-check-input {
  width: 5rem;
  height: 2.5rem;
  border-radius: 2rem;
}

.switch-big .form-check-input::before {
  width: 2rem;
  height: 2rem;
  top: 0.25rem;
  left: 0.25rem;
  transition: transform 0.2s ease-in-out;
}

.switch-big .form-check-input:checked::before {
  transform: translateX(3.5rem); /* liikkuu oikealle */
}

.switch-big .form-check-label {
  margin-left: 1rem;
  font-size: 1.2rem;
  vertical-align: middle;
}

.checkbox-big .form-check-input {
  width: 3.5rem;
  height: 3.5rem;
}

.checkbox-big .form-check-label {
  margin-left: 0.75rem;
  font-size: 1.2rem;
  vertical-align: middle;
}