/* --- Upload progress UI --- */
.upload-list { margin-top: 10px; display: grid; gap: 8px; }
.up-item { display: grid; grid-template-columns: 1fr 72px; gap: 10px; align-items: center; }
.up-name { font-size: .95rem; color:#ddd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-bar { height: 8px; background:#2a2a2a; border-radius: 6px; overflow: hidden; grid-column: 1/-1; }
.up-bar > div { height: 100%; width: 0%; background: var(--color-accent); transition: width .15s linear; }

.overall-wrap { margin-top: 12px; }
.overall-label { font-size: .95rem; margin-bottom: 6px; color:#cfd3d6; }
.overall-bar { height: 10px; background:#222; border-radius: 6px; overflow: hidden; }
.overall-bar > div { height:100%; width:0%; background: #27ae60; transition: width .15s linear; box-shadow: 0 0 8px rgba(39,174,96,.5) inset; }

    .bod-wrap{max-width: 1800px; margin: 28px auto; padding: 0 16px;}
    .card{background: var(--color-card); border:1px solid var(--color-border); border-radius: 12px; padding: 18px;}
    .titlebar{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
    .titlebar h2{margin:0}
    .btn{background:var(--color-accent); color:#fff; border:none; padding:10px 14px; border-radius:10px; font-weight:700; cursor:pointer;}
    .btn-outline{background:transparent; border:1px solid var(--color-accent); color:var(--color-accent);}

    .fm{display:grid; gap:12px;}
    .fm label span{display:block; margin:0 0 6px; color:#cfd3d6; font-size:.95rem;}
    .fm input[type="text"], .fm textarea, .fm select{
      width:100%; background:#101010; color:#fff; border:1px solid var(--color-border);
      border-radius:10px; padding:12px;
    }
    .fm textarea{min-height:110px; resize:vertical;}
    .uploader{border:1px dashed #3a3a3a; border-radius:12px; padding:14px; background:#121212;}
    .thumbs{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; margin-top:12px;}
    .thumb{position:relative; overflow:hidden; border-radius:10px; background:#000; border:1px solid var(--color-border); aspect-ratio:1/1;}
    .thumb img{width:100%; height:100%; object-fit:cover; display:block;}
    .actions{display:flex; gap:10px; justify-content:flex-end; margin-top:6px;}
    .note{font-size:.9rem; color:#aab0b5;}
    .pill{display:inline-flex; align-items:center; gap:6px; padding:4px 8px; background:#161616; border:1px solid var(--color-border); border-radius:999px; font-size:.85rem; color:#ddd}

    .filterbar{display:flex; gap:10px; align-items:center; margin:18px 0 8px;}
    .grid{display:grid; gap:10px;}
    .item{background:#141414; border:1px solid var(--color-border); border-radius:10px; padding:12px;}
    .item h4{margin:0 0 4px}
    .imgs{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; margin-top:8px}
    .imgs a img{width:100%; height:100px; object-fit:cover; border-radius:8px; border:1px solid #222}

    /* Info banner */
.info-banner{
  display:flex; gap:12px; align-items:flex-start;
  background:#0e2021; border:1px solid rgba(255,255,255,.06);
  border-radius:12px; padding:12px 14px; margin: 0 0 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25) inset;
}
.info-banner__icon{ font-size:22px; line-height:1; }
.info-banner__text{ color:#dfe7e9; }
.info-banner__link{ color:#fff; font-weight:800; text-decoration:underline; }
.info-banner__note{ opacity:.85; font-size:.9rem; margin-top:4px; }

/* Drive preview */
.drive-preview{ display:flex; gap:8px; align-items:center; margin-top:6px; }
.drive-preview .pill{ background:#132224; border-color:#24494d; color:#d7f3f5; }
.drive-preview code{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Modern date & time input styling */
input[type="date"], input[type="time"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #101010;
  color: #f4f4f4;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.95rem;
  transition: all .25s ease;
  cursor: pointer;
}

/* subtle glowing focus */
input[type="date"]:focus,
input[type="time"]:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(21,100,178,0.25);
  outline: none;
}

/* calendar & clock icons for WebKit browsers */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  background: url("data:image/svg+xml,%3Csvg width='18' height='18' xmlns='http://www.w3.org/2000/svg' fill='%23cfcfcf'%3E%3Cpath d='M5 2a1 1 0 0 1 2 0v1h4V2a1 1 0 0 1 2 0v1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h1V2Zm-1 5v8h10V7H4Zm2 2h2v2H6V9Z'/%3E%3C/svg%3E")
    no-repeat center;
  background-size: 18px;
  opacity: 0.7;
  cursor: pointer;
  filter: invert(70%);
}

/* Clock icon for time picker specifically */
input[type="time"]::-webkit-calendar-picker-indicator {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23cfcfcf' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5a.5.5 0 0 1 .5.5v4.25l3.25 1.938a.5.5 0 1 1-.5.866l-3.5-2.083A.5.5 0 0 1 7.5 8V4a.5.5 0 0 1 .5-.5z'/%3E%3Cpath d='M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zM1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8z'/%3E%3C/svg%3E")
    no-repeat center;
  background-size: 18px;
}

/* Firefox placeholder fix */
input[type="date"]::-moz-placeholder,
input[type="time"]::-moz-placeholder {
  color: #777;
}

/* --- polish & helpers --- */
.flex-1{flex:1}
.badge { background:#132224; color:#d7f3f5; border:1px solid #24494d; border-radius:999px; padding:4px 8px; font-weight:700; }
.skeleton{ position:relative; overflow:hidden; background:#171717; border:1px solid var(--color-border); border-radius:10px; height:90px; }
.skeleton::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent); transform:translateX(-100%); animation:sweep 1.2s infinite; }
@keyframes sweep{ to{ transform:translateX(100%)} }

.toast{ position:fixed; right:16px; bottom:16px; background:#132224; color:#d7f3f5; border:1px solid #24494d; border-radius:12px; padding:10px 14px; box-shadow:0 10px 30px rgba(0,0,0,.35); display:none; }
.toast.show{ display:block; }

.filterbar .search{ flex:1 1 280px; display:flex; }
.filterbar .search input{
  width:100%; background:#101010; color:#fff; border:1px solid var(--color-border);
  border-radius:10px; padding:10px 12px;
}

#countPill {
  background: #101010;
  border: 1px solid var(--color-border);
  border-radius: 10px;   /* remove circle */
  padding: 6px 14px;     /* more balanced */
  font-weight: 600;
  color: #d7f3f5;
  text-align: center;
  min-width: 80px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Add these new rules inside the <style> tag */
.form-grid-row {
  display: grid;
  gap: 16px;
  align-items: start; /* Aligns items to the top */
}
/* For Name + Conducted By */
.row-split-2-1 {
  grid-template-columns: 2fr 1fr;
}
/* For Dates + Time */
.row-split-3 {
  grid-template-columns: repeat(3, 1fr);
}
/* For Description + Avenues */
.row-split-tall {
  grid-template-columns: 2fr 1fr;
}
/* This is the key: make the textarea and select the same height */
.row-split-tall textarea,
.row-split-tall select {
  height: 180px;
}
.fm textarea {
  resize: vertical; /* a-lready present, but good to confirm */
}

/* On mobile, stack everything into a single column */
@media (max-width: 768px) {
  .row-split-2-1,
  .row-split-3,
  .row-split-tall {
    grid-template-columns: 1fr;
  }
  
  .row-split-tall textarea,
  .row-split-tall select {
    height: auto; /* Reset height */
  }
  .row-split-tall select {
     min-height: 160px; /* Use min-height on mobile */
  }
}

/* Add these new rules to your <style> block */
    .kpi-grid {
      display: grid;
      /* This flexible grid replaces the rigid inline style */
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 12px;
      margin: 10px 0 6px;
    }
    .kpi-card {
      background:#121212;
      border:1px solid var(--color-border);
      border-radius:10px;
      padding:10px 12px;
      min-height: 70px; /* Ensures all cards are same height */
    }
    .kpi-label {
      opacity:.8;
      font-size:.9rem;
      margin-bottom: 6px;
    }
    .kpi-value {
      font-weight:800;
      font-size:1.35rem;
    }
    
    /* Fix for Top Conductors card */
    #kpiTopConductors {
      font-weight: 700;
      font-size: 1.1rem; /* Slightly smaller to fit more */
      white-space: normal; /* Allows the name to wrap to a new line */
      line-height: 1.3;
      word-break: break-word; /* Breaks long names if needed */
    }
    
    /* Fix for Avenue chips card */
    .kpi-card.avenue-card .kpi-label {
       margin-bottom: 8px;
    }
    #kpiAvenues {
      display:flex;
      flex-wrap:wrap;
      gap:6px;
    }
    .adm-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:9999;padding:16px}
    .adm-modal[aria-hidden="false"]{display:flex}
    .adm-modal__sheet{width:min(680px,96vw);max-height:90vh;overflow-y:auto;background:#181818;border:1px solid var(--color-border);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.5);padding:16px 16px 18px}
    .adm-modal__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
    .adm-modal__head h3{margin:0;color:#fff}
    .adm-close{background:#262626;color:#ddd;border:1px solid var(--color-border);width:36px;height:36px;border-radius:8px;cursor:pointer}
    .adm-form{display:grid;gap:12px}
    .adm-field{display:flex;flex-direction:column;gap:6px}
    .adm-field input,.adm-field textarea, .adm-field select{background:#101010;color:#fff;border:1px solid var(--color-border);border-radius:8px;padding:10px}
    .adm-field select[multiple] { height: 160px; }
    .adm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
    .adm-field textarea { min-height: 120px; resize: vertical; }
.card__image {
      width: 25%;
      height: 180px; /* <-- Made smaller */
      object-fit: cover;
      border-radius: 10px;
      background: #101010;
      border: 1px solid var(--color-border);
      margin-bottom: 12px;
      cursor: pointer; /* <-- Add pointer */
      transition: transform 0.2s ease, border-color 0.2s ease;
    }
    .card__image:hover {
      border-color: var(--color-accent);
    }
    .iconbtn[data-edit] {
      color: #71c6f8; /* blue */
      font-size: 1.1rem;
    }
    .iconbtn[data-edit]:hover {
      background: rgba(0, 120, 255, 0.1);
      color: #89d1fb;
    }
    /* === NEW IMAGE LIGHTBOX STYLES === */
    .lightbox-modal {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.75);
      backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      padding: 20px;
    }
    .lightbox-modal[aria-hidden="false"] {
      display: flex;
    }
    .lightbox-modal img {
      max-width: 90vw;
      max-height: 90vh;
      border-radius: 12px;
      box-shadow: 0 10px 40px rgba(0,0,0,.5);
    }
    .lightbox-close {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 40px;
      height: 40px;
      border: 0;
      background: rgba(0,0,0,.5);
      color: #fff;
      border-radius: 50%;
      font-size: 24px;
      cursor: pointer;
    }
    /* ... your existing .lightbox-modal styles ... */
    
    /* === NEW LOADER STYLES === */
    .loader-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.6);
      backdrop-filter: blur(5px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 9998;
      flex-direction: column;
      gap: 12px;
      color: #fff;
      font-weight: 600;
    }
    .loader-overlay[aria-hidden="false"] { display: flex; }
    .loader-text { font-size: 1.1rem; }
    /* Simple CSS spinner */
    .spinner {
      width: 48px;
      height: 48px;
      border: 4px solid #444;
      border-top-color: var(--color-accent);
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ... your existing .loader-overlay styles ... */
    
    /* === UPDATED FILE UPLOAD STYLES === */
    /* This hides the default "Choose Files" button and text */
    input[type="file"]#imageUploader {
      opacity: 0; /* Make it completely invisible */
      position: absolute; /* Take it out of flow */
      z-index: -1; /* Place it behind other elements */
      width: 0.1px; /* Make it tiny to avoid interfering with layout */
      height: 0.1px; /* Make it tiny */
      overflow: hidden; /* Hide any overflow */
      white-space: nowrap; /* Prevent text from wrapping */
    }

    /* This is the new, styled button that acts as the label */
    .file-upload-label {
      display: inline-block;
      padding: 10px 16px;
      background: var(--color-bg-light); /* Matches your other buttons */
      border: 1px solid var(--color-border);
      border-radius: 10px;
      cursor: pointer;
      font-weight: 600;
      transition: background 0.2s ease, border-color 0.2s ease;
      /* Add some space between the label and the file names */
      margin-right: 10px; 
    }
    .file-upload-label:hover {
      border-color: var(--color-accent);
      background: #333;
    }
    
    #file-upload-names {
      /* Adjust styling for the file names display */
      display: inline-block; /* Make it sit next to the label */
      vertical-align: middle; /* Align with the label */
      margin-top: 0; /* Remove top margin */
      opacity: 0.8;
      font-size: 0.9rem;
      max-width: 250px; /* Limit width to prevent it from spanning too far */
      overflow: hidden; /* Hide overflow text */
      text-overflow: ellipsis; /* Add ellipsis for overflow */
      white-space: nowrap; /* Keep text on a single line */
    }
    .adm-field .input-group { /* New rule */
      margin-top: 8px; /* Give some space below the main label */
      display: flex; /* Make the label and span sit nicely */
      align-items: center; /* Vertically align them */
      gap: 10px; /* Space between them */
    }

    /* Your existing .adm-field styles... */
    .adm-field > span {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      color: var(--color-text);
      opacity: 0.9;
    }


/* ===== Visual Polish Upgrade (same theme) ===== */
.bod-wrap{
  max-width: 1840px;
  margin: 34px auto;
  padding: 0 20px 28px;
}

.bod-wrap > .card,
.bod-wrap > .info-banner{
  margin-bottom: 18px;
}

.card{
  padding: 22px;
}

.titlebar{
  margin-bottom: 18px;
}

.fm{
  gap: 16px;
}

.form-grid-row{
  gap: 18px;
}

.note{
  line-height: 1.55;
}

/* Soft glass KPI cards */
.kpi-grid{
  gap: 14px;
  margin: 14px 0 12px;
}

.kpi-card{
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(20,20,20,.86), rgba(14,14,14,.92));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 8px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}

.kpi-card::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(240,213,138,.95), rgba(212,164,55,.92), rgba(96,195,196,.9));
}

.kpi-card:hover{
  transform: translateY(-2px);
  border-color: rgba(212,164,55,.55);
  box-shadow: 0 14px 30px rgba(0,0,0,.34), 0 0 0 1px rgba(212,164,55,.16) inset;
}

/* Submission cards: richer hover + subtle gradient strip */
#items .card{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}

#items .card::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(212,164,55,.85), rgba(96,195,196,.85));
}

#items .card:hover{
  transform: translateY(-3px);
  border-color: rgba(212,164,55,.42);
  box-shadow: 0 16px 34px rgba(0,0,0,.35), 0 0 0 1px rgba(212,164,55,.12) inset;
}

.card__image{
  width: 100%;
  max-width: 420px;
  transform-origin: center;
  transition: transform .32s ease, filter .32s ease, border-color .22s ease;
}

#items .card:hover .card__image{
  transform: scale(1.03);
  filter: saturate(1.05) contrast(1.02);
}

/* Avenue chips + icon accents */
.avenue-chip{
  position: relative;
  padding: 5px 10px;
  font-weight: 700;
}

.avenue-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9fb0b8;
  box-shadow: 0 0 0 2px rgba(159,176,184,.18);
}

.avenue-isd .avenue-dot { background:#4fc3f7; }
.avenue-cmd .avenue-dot { background:#ffb74d; }
.avenue-csd .avenue-dot { background:#81c784; }
.avenue-pdd .avenue-dot { background:#f48fb1; }
.avenue-rrro .avenue-dot{ background:#b39ddb; }
.avenue-pro .avenue-dot { background:#4dd0e1; }
.avenue-dei .avenue-dot { background:#ef9a9a; }
.avenue-gbm .avenue-dot { background:#ffd54f; }

.avenue-isd{ border-color: rgba(79,195,247,.35); }
.avenue-cmd{ border-color: rgba(255,183,77,.35); }
.avenue-csd{ border-color: rgba(129,199,132,.35); }
.avenue-pdd{ border-color: rgba(244,143,177,.35); }
.avenue-rrro{ border-color: rgba(179,157,219,.35); }
.avenue-pro{ border-color: rgba(77,208,225,.35); }
.avenue-dei{ border-color: rgba(239,154,154,.35); }
.avenue-gbm{ border-color: rgba(255,213,79,.35); }

/* Better breathing on mobile while keeping density controlled */
@media (max-width: 768px){
  .bod-wrap{ padding: 0 14px 20px; margin-top: 20px; }
  .card{ padding: 16px; }
  .kpi-grid{ gap: 10px; }
}