/* =========================
   LOKRAv2 consolidated CSS
   ========================= */

/* ----- Tokens / base ----- */
:root{
  --bg:#fff;
  --text:#111;
  --muted:#555;
  --border:#ccc;
  --panel:#fafafa;
  --panel2:#f9f9f9;

  --nav:#1f2937;
  --nav-hover:#374151;

  --accent:#2563eb;
  --warn:#fff7db;

  --radius:10px;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ margin:8px; padding:0; }

body{
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* Optional wrapper */
.page-inner{
  max-width:900px;
  margin:1.5rem auto;
  padding:0 1.5rem 1.5rem;
}

/* =========================
   TABLES (desktop)
   ========================= */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:.9rem;
  background:#fff;
}

th,td{
  border:1px solid var(--border);
  padding:.4rem .8rem;
  text-align:left;
  vertical-align:top;
}

th{
  background:#eee;
  font-weight:600;
}

tr:nth-child(even) td{ background:#fafafa; }

/* Row highlight when open (desktop) */
tr.entry-row.is-open td{ background:var(--warn); }

/* -------------------------
   Details row (animation)
   -------------------------
   IMPORTANT: do NOT use display:none for animation.
   We keep the row in the table, and animate .details-inner.
*/
tr.details-row td{
  /* hide chrome of the row itself */
  padding:0;
  border:0;
  background:transparent;
}

/* the animated panel */
tr.details-row .details-inner{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(-6px);

  padding:0;
  border:0;
  background:transparent;
  border-radius:0;

  transition:
    max-height 220ms ease,
    opacity 160ms ease,
    transform 160ms ease,
    padding 160ms ease,
    border-color 160ms ease;
  will-change:max-height,opacity,transform;
}

tr.details-row.is-open .details-inner{
  max-height:1200px;          /* big enough for your content */
  opacity:1;
  transform:translateY(0);

  padding:10px;
  border:1px solid var(--border);
  background:var(--warn);
}

/* =========================
   MOBILE TABLE -> CARDS
   ========================= */
@media (max-width:700px){
  table{ border:0; table-layout:auto; }
  thead{ display:none; }

  /* each entry row becomes a card */
  tbody tr.entry-row{
    display:block;
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:10px 12px;
    margin:10px 0;
    background:#fff;
  }

  tbody tr.entry-row td{
    display:block;
    border:0;
    padding:8px 0;
  }

  tbody tr.entry-row td::before{
    content:attr(data-label);
    display:block;
    font-size:12px;
    font-weight:600;
    color:var(--muted);
    margin-bottom:2px;
  }

  /* actions row: icons on one line, no label */
  tbody td.cell-actions{
    padding-top:10px;
    white-space:normal;
  }
  tbody td.cell-actions::before{ content:none; }

  /* details row: also card-like */
  tr.details-row{
    display:block;            /* TR is block in card mode */
    margin:-6px 0 10px;       /* tuck under the card a bit */
  }

  tr.details-row td{
    display:block;
    padding:0;
    border:0;
    background:transparent;
  }
  tr.details-row td::before{ content:none; }

  /* make the open panel feel like a card */
  tr.details-row.is-open .details-inner{
    border-radius:var(--radius);
  }

  /* highlight both cards when open */
  tr.entry-row.is-open{
    background:var(--warn);
    border-color:#bfc5cd;
  }
}

/* subtle transitions */
tbody tr{
  transition: background-color 120ms ease, border-color 120ms ease;
}

/* =========================
   TOP NAV
   ========================= */
.topnav{
  background:var(--nav);
  color:#fff;
  border:1px solid #fff;
}

.topnav-bar{
  display:flex;
  align-items:center;
  gap:18px;
  padding:10px 14px;
}

.topnav-logo-img{ height:34px; width:auto; display:block; }

/* Desktop nav */
.topnav-nav{
  display:flex;
  align-items:center;
  gap:18px;
  flex:1;
  flex-wrap:wrap;
}

/* Links/buttons share styling */
.topnav-link,
.topnav-dropbtn{
  appearance:none;
  background:none;
  border:0;
  color:#fff;
  font:inherit;
  font-size:20px;
  line-height:1.2;
  text-decoration:none;
  padding:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
}

.topnav-link:hover,
.topnav-dropbtn:hover{ text-decoration:underline; }

/* User block right-aligned on desktop */
.topnav-user{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:18px;
  white-space:nowrap;
}
.topnav-user-email{ font-size:20px; }

/* Dropdown (desktop hover) */
.topnav-dropdown{ position:relative; display:inline-flex; align-items:center; }

.topnav-dropdown-content{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  z-index:1000;
  margin-top:8px;
  background:var(--nav);
  border-radius:8px;
  min-width:220px;
  padding:8px 0;
  box-shadow:0 10px 22px rgba(0,0,0,.25);
}

.topnav-dropdown::after{
  content:"";
  position:absolute;
  left:0; right:0; top:100%;
  height:8px;
}

.topnav-dropdown:hover > .topnav-dropdown-content{ display:block; }

.topnav-dropdown-content a{
  display:block;
  padding:8px 14px;
  font-size:16px;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
}

.topnav-dropdown-content a:hover{ background:var(--nav-hover); }

/* Burger (hidden on desktop) */
.topnav-burger{
  display:none;
  appearance:none;
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
}

/* Locale */
.topnav-locale{
  display:flex;
  align-items:center;
  margin-left:0;
}

.topnav-locale select{
  background-color:var(--nav);
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius);
  padding:6px 10px;
  font:inherit;
  cursor:pointer;
}
.topnav-locale select option{ background-color:var(--nav); color:#fff; }

.topnav-locale select:focus-visible{
  outline:2px solid rgba(59,130,246,.9);
  outline-offset:2px;
}

/* Logged-out/login: selector is in the bar -> push it right */
.topnav-bar > .topnav-locale{ margin-left:auto; }

/* Mobile nav behavior */
@media (max-width:700px){
  .topnav-bar{
    justify-content:space-between;
    flex-wrap:wrap;        /* nav drops to next line */
    gap:10px;
  }

  .topnav-burger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:var(--radius);
    background:rgba(255,255,255,.06);
    font-size:20px;
    line-height:1;
  }
  .topnav-burger:hover{ background:rgba(255,255,255,.12); }

  .topnav-burger:focus-visible{
    outline:2px solid rgba(200,16,46,.7);
    outline-offset:2px;
  }

  /* Animated menu open/close */
  .topnav-nav{
    flex-basis:100%;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:6px;

    max-height:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(-6px);
    transition:max-height 220ms ease, opacity 160ms ease, transform 160ms ease;

    padding-top:0;
    margin-top:0;
    border-top:0;
  }

  .topnav-nav.is-open{
    max-height:80vh;
    opacity:1;
    transform:translateY(0);

    padding-top:10px;
    margin-top:10px;
    border-top:1px solid rgba(255,255,255,.18);
  }

  .topnav-link,
  .topnav-dropbtn{
    width:100%;
    justify-content:flex-start;
    padding:8px 10px;
    border-radius:6px;
  }

  .topnav-link:hover,
  .topnav-dropbtn:hover{
    background:var(--nav-hover);
    text-decoration:none;
  }

  .topnav-user{
    margin-left:0;
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    white-space:normal;

    padding-top:10px;
    margin-top:10px;
    border-top:1px solid rgba(255,255,255,.18);
  }

  .topnav-user-email{ width:100%; overflow-wrap:anywhere; }

  /* Dropdown is just an always-visible list under button */
  .topnav-dropdown{ display:block; width:100%; position:static; }
  .topnav-dropdown::after{ display:none; }

  .topnav-dropdown-content{
    display:block;
    position:static;
    margin:0;
    padding:4px 0 0;
    min-width:0;
    box-shadow:none;
    background:transparent;
    border-radius:0;
  }

  .topnav-dropdown-content a{
    padding:8px 10px 8px 24px;
    white-space:normal;
  }

  /* Locale full width inside menu */
  .topnav-nav .topnav-locale{ width:100%; }
  .topnav-nav .topnav-locale select{ width:100%; }
}

/* =========================
   ICON BUTTONS + SR ONLY
   ========================= */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  background:transparent;
  border:0;
  padding:0;
  border-radius:6px;
  color:var(--accent);
  text-decoration:none;
  cursor:pointer;
}

.icon-btn:hover{ background:rgba(0,0,0,.06); }
.icon-btn svg{ display:block; width:20px; height:20px; }

/* =========================
   FLASH MESSAGES
   ========================= */
.flash{
  margin:12px auto;
  padding:12px 16px;
  max-width:900px;
  border-radius:var(--radius);
  box-sizing:border-box;
  transition:opacity 400ms ease, max-height 400ms ease;
}

.flash.success{
  background:#dcfce7;
  border:1px solid #22c55e;
  color:#065f46;
}
.flash.error{
  background:#fee2e2;
  border:1px solid #ef4444;
  color:#7f1d1d;
}
.flash.warn,.flash.warning{
  background:#fffbeb;
  border:1px solid #f59e0b;
  color:#78350f;
}

/* =========================
   EDIT FORMS
   ========================= */
.ef-grid{
  display:grid;
  grid-template-columns:1fr;  /* single column everywhere */
  gap:12px;
  margin-top:12px;
}

.ef-field{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px;
  background:#fff;
}

.ef-field input,
.ef-field select,
.ef-field textarea{
  width:100%;
  padding:10px;
  border:1px solid #d1d5db;
  border-radius:8px;
  font:inherit;
  background:#fff;
}

.ef-field textarea{ resize:vertical; }

.ef-field input:focus,
.ef-field select:focus,
.ef-field textarea:focus{
  outline:2px solid rgba(200,16,46,.35);
  outline-offset:2px;
  border-color:rgba(200,16,46,.45);
}

.ef-label{ margin-top:6px; font-size:.9rem; color:var(--muted); }
.ef-help{ margin-top:6px; font-size:.9rem; color:#6b7280; }

.ef-field--readonly{ background:var(--panel); }
.ef-field--readonly input{ background:#f3f4f6; color:#374151; }

.ef-field--check{ display:flex; align-items:flex-start; gap:10px; }
.ef-field--check input[type="checkbox"]{ width:18px; height:18px; margin-top:4px; }

.ef-check-title{ font-weight:700; color:var(--text); }

/* Small field value helpers */
.field{ margin-bottom:10px; }
.field-label{ font-size:12px; color:var(--muted); line-height:1.2; }
.field-value{ font-size:14px; color:var(--text); line-height:1.4; word-break:break-word; }

/* =========================
   LOGIN + BUTTONS
   ========================= */
.login-wrap{
  min-height:calc(100vh - 120px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.login-card{
  width:100%;
  max-width:360px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px;
}

.login-title{
  margin:0 0 14px;
  font-size:1.4rem;
  text-align:center;
}

.login-btn{
  width:100%;
  margin-top:10px;
  padding:10px 12px;
  font:inherit;
  border:0;
  border-radius:var(--radius);
  background:var(--accent);
  color:#fff;
  cursor:pointer;
}
.login-btn:hover{ background:#1d4ed8; }
.login-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:var(--radius);
  font:inherit;
  text-decoration:none;
  cursor:pointer;
  background:#e5e7eb;
  color:#111827;
  width:100%;
}
.btn-secondary:hover{ background:#d1d5db; }
.btn-secondary:focus-visible{ outline:2px solid rgba(107,114,128,.7); outline-offset:2px; }

.btn-danger{
  width:100%;
  padding:10px 12px;
  font:inherit;
  border:1px solid #dc2626;
  border-radius:var(--radius);
  background:#ef4444;
  color:#fff;
  cursor:pointer;
}
.btn-danger:hover{ background:#dc2626; }
.btn-danger:focus-visible{ outline:2px solid #dc2626; outline-offset:2px; }

.form-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:16px;
}

.btn-auto{
  width:auto;
  align-self:flex-start;
}

/* =========================
   CAMERA MODAL
   ========================= */
.camera-modal{
  border:0;
  padding:0;
  border-radius:14px;
  width:min(92vw, 560px);
}
.camera-modal::backdrop{ background:rgba(0,0,0,.55); }

.camera-inner{ background:#fff; padding:14px; }

.camera-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.camera-title{ font-weight:700; font-size:16px; }
.camera-video{ width:100%; border-radius:12px; background:#111; }

.camera-actions{
  display:flex;
  gap:10px;
  justify-content:space-between;
  margin-top:12px;
  flex-wrap:wrap;
}
.camera-actions .btn-auto{ white-space:nowrap; }

/* Entry image row */
.ef-media-row{ display:flex; align-items:center; gap:10px; }
.ef-media-left{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}
.ef-media-thumb{
  width:90px;
  height:90px;
  object-fit:cover;
  border-radius:var(--radius);
  border:1px solid #ddd;
  flex:0 0 auto;
}
.ef-media-placeholder{
  width:90px;
  height:90px;
  border-radius:var(--radius);
  border:1px dashed #bbb;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#666;
  font-size:12px;
  flex:0 0 auto;
}
.ef-media-text{ min-width:0; }

@media (max-width:700px){
  .ef-media-row{ flex-wrap:wrap; align-items:flex-start; }
  .ef-media-left{ width:100%; }
  #btn_take_photo{ width:100%; }
}

/* =========================
   Parent search results
   ========================= */
.parent-results{
  margin-top:8px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
  overflow:hidden;
}
.parent-result-item{
  display:block;
  width:100%;
  text-align:left;
  padding:10px;
  border:0;
  background:#fff;
  cursor:pointer;
  font:inherit;
}
.parent-result-item:hover{ background:#f3f4f6; }