/* ============================================================
   kfs.css — main layout & components
   ============================================================ */
   
/* ---------- 010: Global Typography (Single Source Font System) ---------- */
/* CHANGE FONTS HERE - This controls the entire site */
@import url('https://fonts.googleapis.com/css2?family=Sansation:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap&subset=latin,greek');

:root {
  --kfs-main-font: 'Sansation', 'Georgia', serif;
  --kfs-ui-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html, body{
  margin: 0;
  padding: 0;
  font-family: var(--kfs-main-font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #222;
  background: #fff;
}

/* Apply main font to content areas */
.panel, .card, main, article, section {
  font-family: var(--kfs-main-font);
}

/* Headings use main font */
h1, h2, h3 { 
  font-weight: 600; 
  font-family: var(--kfs-main-font);
}
h4, h5, h6 { 
  font-weight: 500; 
  font-family: var(--kfs-main-font);
}

/* UI elements use system fonts */
.header, .header *, .btn, button, input, select, textarea {
  font-family: var(--kfs-ui-font);
}
/* /010 */

/* ---------- 020: Theme vars ---------- */
:root {
  --bg:#0f2639; --panel:#fff; --muted:#6b7a8a;
  --on:#eef7ff; --off:#f4f6f8;
  --primary:#0b7; --accent:#ff5a3d;
  --chip:#eef2f7; --bd:#e6eef4;
  --header-h:56px;
  --tabbar-h:64px; /* mobile bottom nav height */
}

/* ---------- 016: language slide panel ---------- */
#kfs-lang-panel{position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-end;justify-content:center}
#kfs-lang-panel .lang-panel-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}
#kfs-lang-panel .lang-panel-body{background:#fff;width:100%;max-width:420px;border-radius:16px 16px 0 0;padding:12px;display:flex;flex-wrap:wrap;gap:8px}
#kfs-lang-panel .lang-choice{flex:1 1 45%;display:flex;align-items:center;gap:10px;padding:12px;border-radius:10px;background:#f4f7fb;text-decoration:none;color:#0a1f33;font-weight:600}
#kfs-lang-panel .lang-choice:active{background:#ff6600;color:#fff}
/* /016 */


/* /020 */

/* ---------- 030: Global ---------- */
*{box-sizing:border-box}
body{
  margin:0;
  font:15px/1.45 var(--kfs-main-font);
  color:#18222b; background:var(--bg);
}
/* /030 */


/* ---------- 040: Modern Header (KFS Style) ---------- */
.header {
  background: #0A1F33;
  color: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.brand-emoji {
  font-size: 22px;
  line-height: 1;
}

.brand-title {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.5px;
  margin: 0;
  white-space: nowrap;
}

.actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.actions a {
  color: #cfe6f2;
  text-decoration: none;
}

.lang, .lang-switch {
  display: flex;
  gap: 8px;
  align-items: center;
}

.lang .btn, .lang-switch .btn {
  background: #132b47;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}

.lang .btn:hover, .lang-switch .btn:hover {
  background: #1a3a5a;
}

.btn.pill {
  background: #eef5fb;
  color: #333;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
}

/* Legacy brand selector (for backward compatibility) */
.brand .logo{width:22px; height:22px; margin-right:8px}
.brand .brand-left{display:flex; align-items:center; gap:10px; font-weight:500; letter-spacing:.3px}
.brand .admin-link{color:#bfe3ff; text-decoration:none; font-weight:600}
/* /040 */
/* ---------- 050: App grid ---------- */
.app{
  display:grid;
  grid-template-columns:minmax(320px,1fr) 380px;
  gap:18px; padding:16px;
}
@media (max-width:980px){ .app{grid-template-columns:1fr} }
/* /050 */

/* ---------- 060: Map wrap (FIXED height calculations) ---------- */
.map-wrap{
  background:var(--panel); border-radius:14px; padding:10px; position:relative;
}
#map{
  width:100%;
  height:calc(100vh - 120px); /* Base desktop height */
  min-height:400px;
  border-radius:10px;
}
.leaflet-container{ background:#dee5ea; }

/* Mobile map height override */
@media (max-width: 768px) {
  #map {
    height:calc(100vh - 180px); /* Account for header + bottom nav */
    min-height:400px;
  }
}

@media (max-width: 480px) {
  #map {
    height:calc(100vh - 200px); /* Extra space on very small screens */
    min-height:350px;
  }
}
/* /060 */

/* ---------- 070: Legend ---------- */
.legend{
  position:absolute; left:16px; bottom:12px;
  background:#fff; border:1px solid var(--bd); border-radius:10px;
  padding:6px 10px; display:flex; gap:8px; align-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.legend .chip{
  background:var(--chip); border-radius:999px; padding:2px 8px; font-size:12px;
  border:1px solid var(--bd); display:inline-flex; align-items:center; gap:6px;
}
.legend .chip img{width:16px; height:16px; display:inline-block}
/* /070 */

/* ---------- 080: Sidebar cards ---------- */
.sidebar{display:flex; flex-direction:column; gap:16px}
.card{
  background:var(--panel); border-radius:14px; padding:14px;
  box-shadow:0 10px 26px rgba(0,10,30,.05)
}
.card h3{margin:4px 0 10px 0}
/* /080 */

/* ---------- 090: Overlays ---------- */
.ov{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border:1px solid var(--bd); border-radius:12px;
  margin:10px 0; cursor:pointer; user-select:none;
  background:var(--off); pointer-events:auto;
}
.ov.on{background:var(--on); border-color:#cde2f7}
.ov .ov-l{display:flex; gap:8px; align-items:center; font-weight:700}
.ov .count{background:#0001; border-radius:10px; padding:1px 8px; font-weight:700}
/* /090 */

/* ---------- 100: Range ---------- */
.range-label{font-size:12px; color:#3b546f; margin-right:6px}
#rangeHours{padding:4px 6px; border-radius:8px; border:1px solid var(--bd); margin-right:10px}
/* /100 */

/* ---------- 110: Volunteer ---------- */
.vol-form{display:flex; flex-direction:column; gap:8px}
.vol-form input{padding:10px 12px; border-radius:10px; border:1px solid var(--bd)}
.btn{border:0; padding:10px 12px; border-radius:10px; font-weight:700; cursor:pointer}
.btn-grad{background:linear-gradient(90deg,#ff8f59,#ff4a4a); color:#fff}
.muted{color:var(--muted); margin:6px 0 0}
.msg{margin:6px 0 0; font-weight:700}
/* /110 */

/* ---------- 120: Report card ---------- */
.report-card .row{ display:flex; gap:10px; }
.report-card .row > *{ flex:1; }
.report-card textarea{ min-height:70px; resize:vertical; }
.report-card .btn-row{ display:flex; gap:10px; flex-wrap:wrap; }
.report-card .btn-row .btn{ flex:1 1 160px; }
/* /120 */

/* ---------- 130: Bottom tabbar (phone) ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0;
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:flex; justify-content:space-around; align-items:center;
  background:rgba(10,31,51,.92); color:#fff;
  border-top:1px solid rgba(255,255,255,.12);
  z-index:500;
}
.tabbar button{
  flex:1; padding:10px 0;
  font:600 12px/1.2 system-ui; color:#fff;
  background:none; border:0;
}
.tabbar .active{ text-decoration:underline; }

@media (min-width:900px){
  .tabbar{ position:static; height:auto; padding-bottom:0; background:transparent; border:0; }
  #map{ height:calc(100dvh - var(--header-h)); }
}
/* /130 */

/* ---------- 140: Photo link hover + size ---------- */
.photo-link {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  background-color: #f1f1f1;
  font-size: 13px;
  text-decoration: none;
  margin-right: 4px;
  transition: background-color 0.2s ease;
}
.photo-link:hover {
  background-color: #d6eaff;
}
/* /140 */

/* ---------- 150: Photo pill ---------- */
.photo-pill {
  display: inline-block;
  background: var(--chip);
  border-radius: 999px;
  padding: 2px 6px;
  margin: 2px 4px 0 0;
  text-decoration: none;
  font-size: 13px;
  border: 1px solid var(--bd);
}
.photo-pill:hover {
  background: #eefaff;
  border-color: #ace;
}
/* /150 */