/* Theme variables and basic overrides for light/dark */
 /* small transition to make switch smoother */
    body, .card-section, .form-control, .form-select { transition: background-color .18s ease, color .18s ease; }

    /* floating theme toggle in top-right */
    #themeToggle {

      padding: 6px 8px;

      background: var(--card-bg);
      border: 1px solid var(--border);
      color: var(--text);
      cursor: pointer;

      font-size: 1rem;
    }
    #themeToggle img { width:18px; height:18px; display:inline-block; }

    .img-swap:hover {
        content: url("buum.png"); /* on hover */
    }

    .top-header-message {
        text-align: center;
        background: red;
        color: white;
    }

    .version {
        color: #6c757d;
        text-align: center;
    }

    .btn.btn-primary {
      background: #00A99D;
      --bs-btn-border-color: #00A99D;
    }
    .btn.btn-primary:hover {
      background: #027a72;
      --bs-btn-border-color: #027a72;
      transition: all 1s ease;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
    }

    .small-muted { color:#6c757d; font-size:.85rem; }

    .section-title { font-size:1rem; font-weight:600; margin-bottom:.5rem; color:#0d6efd; }

    .search-results { position: absolute; z-index:1200; width:100%; max-height:260px; overflow:auto; }
    .client-item { cursor:pointer; }
    .hidden { display:none; }

    #refreshCauses {
        border-color: var(--bs-border-color);
    }




    /*  tickets */
    /* mobile: hide table, show cards */
    .tickets-table { display: block; }
    .tickets-cards { display: none; }
    

    @media (max-width: 575.98px) {
      .tickets-table { display: none; }
      .tickets-cards { display: block; }
      .ticket-card { margin-bottom: .75rem; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: .5rem; box-shadow: 0 6px 16px rgba(0,0,0,.04); padding:.75rem; }
      .ticket-card .meta { font-size:.9rem; color:#6c757d; }
      .ticket-card .title { font-weight:600; font-size:1rem;  }
      .ticket-card .status { font-weight:600; color:#0d6efd; float:right; }

      .app-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        width: 100%;
        max-width: 100%;
        padding-left: .5rem;
        padding-right: .5rem;
        margin-left: 0;
        margin-right: 0;
      }
      
    }



    /* ticket edit */
    .meta-card {  border-radius: .375rem; box-shadow: 0 0.5rem 1rem rgba(0,0,0,.03); padding: 1rem; }
    .meta-row { display:flex; flex-direction:column; gap:.25rem; margin-bottom:.5rem; }
    .meta-label { font-weight:600; color:#495057; font-size:.9rem; }
    .meta-value {  font-size:.95rem; }
    

    .card-section {  
      padding:1rem; 
      border-radius:.375rem; 
      box-shadow:0 0.25rem 0.5rem rgba(0,0,0,.03); 
      margin-bottom:1rem; 
      border: var(--bs-border-width) solid var(--bs-border-color);
    }


    /* checkbox layout: mobile = 2 columns, desktop = single inline row */
    .inline-checkboxes {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem 1rem;
      align-items: center;
    }
    .inline-checkboxes .form-check {
      width: 50%;               /* two columns on small screens */
      margin: 0;
      margin-right:1rem; 
    }
 

    .problem-box {
        border: 2px solid #0d6efd;;
        border-radius: 8px;
        padding: 15px;
        height: 200px;
        overflow-y: auto;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    .highlighted {
        background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity));
        padding: 5px 10px;
        border-radius: 5px;
        font-weight: bold;
        font-size: 1.3rem;
   
    }

    table.table .red, .red {
      color: red;
    }

    table.table .green, .green {
      color: green;
    }

    @media (max-width:575.98px) {
      .inline-checkboxes { display:grid; grid-template-columns: repeat(2,1fr); gap:.375rem; }
      .inline-checkboxes .form-check { margin-right:0; }
    }
    @media (min-width:576px) {
      .inline-checkboxes { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
    }

    @media (min-width: 768px) {
      .inline-checkboxes {
        flex-wrap: nowrap;      /* keep all items on one line on md+ */
      }
      .inline-checkboxes .form-check {
        width: auto;            /* natural width on desktop */
      }
    }
    
    @media screen and (max-width: 600px) {
        .problem-box {
            height: 150px;
        }
    }


/* marquee */
 .top-header-message {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  text-align: center;
  padding: 0.5rem 1rem;
}

.scrolling-text {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
}

.scrolling-text span {
  display: inline-block;
  padding-right: 3rem;
}

/* Add animation only when JS adds this class */
.scrolling-text.scroll-active {
  animation: scroll-loop 15s linear infinite;
}

@keyframes scroll-loop {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* tooltip */

[data-tooltip] {
  position: relative; /* needed for absolute tooltip positioning */
  cursor: help;
}

[data-tooltip]::after {
  display: none;
  position: absolute;
  content: attr(data-tooltip);
 border: 1px solid #0d6efd;
  border-radius: 5px;
  padding: .25em;
  white-space: nowrap;
  
  /* Position above */
  bottom: 100%;
  left: 60px;
  transform: translateX(-50%);

  margin-bottom: 6px; /* spacing */
  z-index: 999;
}

[data-tooltip]:hover::after {
  display: block;
}