@import url("./geodata-theme.css");

/* ===== Global ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:"Matter",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--gd-color-bg); color:var(--gd-color-text);
  display:flex; align-items:center; justify-content:center; padding:var(--gd-space-6);
}

/* Container */
.container{
  background:var(--gd-color-surface);
  border-radius:var(--gd-radius-md);
  box-shadow:var(--gd-shadow-lg);
  padding:var(--gd-space-8);
  width:100%; max-width:560px;
  animation:containerIn .35s ease-out both;
}
@keyframes containerIn{
  from{opacity:0; transform:translateY(14px)}
  to{opacity:1; transform:translateY(0)}
}

/* Logo */
.logo{display:block; height:48px; width:auto; margin-bottom:var(--gd-space-5)}

/* Headings */
h1{color:var(--gd-color-text); margin-bottom:var(--gd-space-2); font-size:28px; line-height:1.2}
.subtitle{color:var(--gd-color-text); margin-bottom:var(--gd-space-6); font-size:14px}

/* Info box (uses approved light blue) */
.info-box{
  background:var(--gd-color-brand-light);
  border-left:4px solid var(--gd-color-brand);
  padding:var(--gd-space-4);
  border-radius:var(--gd-radius-sm);
  margin-bottom:var(--gd-space-5);
}
.info-box strong{color:var(--gd-color-brand); display:block; margin-bottom:var(--gd-space-1)}
.info-box span{
  color:var(--gd-color-text);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:13px;
}
@media (prefers-color-scheme: dark) {
  .info-box span { color: var(--gd-color-bg); }
  .info-box strong { color: var(--gd-color-bg); }
}

/* Upload area */
.upload-area{
  border:2px dashed var(--gd-color-border);
  border-radius:var(--gd-radius-md);
  padding:var(--gd-space-8);
  text-align:center;
  margin-bottom:var(--gd-space-5);
  transition:border-color .2s ease, background-color .2s ease;
  cursor:pointer;
  background:var(--gd-color-surface);
  /* dot-grid — evokes mapping/coordinate systems */
  background-image:radial-gradient(circle, var(--gd-color-border) 1px, transparent 1px);
  background-size:24px 24px;
}
.upload-area:hover{
  border-color:var(--gd-color-brand);
  background-color:var(--gd-color-brand-light);
  background-image:radial-gradient(circle, color-mix(in srgb, var(--gd-color-brand) 25%, transparent) 1px, transparent 1px);
  background-size:24px 24px;
}
.upload-area.dragover{
  border-color:var(--gd-color-brand);
  background-color:var(--gd-color-brand-light);
  background-image:radial-gradient(circle, color-mix(in srgb, var(--gd-color-brand) 30%, transparent) 1px, transparent 1px);
  background-size:24px 24px;
  transform:scale(1.01);
  transition:border-color .2s ease, background-color .2s ease, transform .15s ease;
}
.upload-icon{font-size:44px; margin-bottom:var(--gd-space-3); color:var(--gd-color-brand)}
input[type="file"]{display:none}

/* File info */
.file-info{
  margin-top:var(--gd-space-4);
  padding:var(--gd-space-4);
  background:var(--gd-lightblue-20);
  border-radius:var(--gd-radius-md);
  display:none; border:1px solid var(--gd-color-border);
}
.file-info.show{display:block; animation:slideIn .2s ease-out}
.file-name{font-weight:600; color:var(--gd-color-text); margin-bottom:var(--gd-space-1)}
.file-size{color:var(--gd-color-text-muted); font-size:14px}

/* Multi-file list */
.file-list-container{
  max-height:160px; overflow-y:auto;
  margin-top:var(--gd-space-3); margin-bottom:var(--gd-space-1);
  display:flex; flex-direction:column; gap:var(--gd-space-1);
}
.file-list-container:empty{display:none}
.file-list-item{
  display:flex; justify-content:space-between; align-items:center;
  padding:var(--gd-space-2) var(--gd-space-3);
  background:var(--gd-color-surface);
  border:1px solid var(--gd-color-border);
  border-radius:var(--gd-radius-sm);
  gap:var(--gd-space-3);
}
.file-list-item-name{
  font-size:13px; color:var(--gd-color-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0;
}
.file-list-item-size{
  font-size:12px; color:var(--gd-color-text-muted); flex-shrink:0;
}

/* Primary button */
.upload-btn{
  width:100%; padding:var(--gd-space-4);
  background:var(--gd-color-brand); color:#ffffff; border:none;
  border-radius:var(--gd-radius-md);
  font-size:16px; font-weight:600; cursor:pointer;
  transition:opacity .15s ease, transform .15s ease;
  margin-top:var(--gd-space-5);
}
.upload-btn:hover:not(:disabled){opacity:0.9; transform:translateY(-1px)}
.upload-btn:disabled{opacity:0.6; cursor:not-allowed}

/* Clear button */
.clear-btn{
  width:50%; padding:var(--gd-space-4);
  background:var(--gd-red-50); color:var(--gd-color-bg); border:none;
  border-radius:var(--gd-radius-md);
  font-size:12px; font-weight:600; cursor:pointer;
  transition:opacity .15s ease, transform .15s ease;
  margin-top:var(--gd-space-5);
}

/* Progress bar */
.progress-bar{
  width:100%; border-radius:999px;
  margin-top:var(--gd-space-5); overflow:hidden; display:none;
}
.progress-bar.show{display:block}
.progress-fill{
  height:8px;
  background:linear-gradient(90deg,
    var(--gd-color-brand) 0%,
    color-mix(in srgb, var(--gd-color-brand) 60%, white) 50%,
    var(--gd-color-brand) 100%);
  background-size:200% 100%;
  width:0%; transition:width .3s ease;
  animation:shimmer 1.6s linear infinite;
  border-radius:999px;
}
.progress-label{
  font-size:12px; color:var(--gd-color-text-muted);
  margin-top:var(--gd-space-2); text-align:center;
}
@keyframes shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* Messages */
.message{margin-top:var(--gd-space-5); padding:var(--gd-space-4); border-radius:var(--gd-radius-md); display:none}
.message.show{display:block}
.message.success{background:var(--gd-green-40); color:var(--gd-green-geotek); border:1px solid var(--gd-green-20)}
.message.error{background:var(--gd-red-50); color:var(--gd-red-600); border:1px solid #FECACA}
.error-details{
  margin-top:var(--gd-space-2); padding:var(--gd-space-3);
  background:var(--gd-color-surface);
  border-radius:var(--gd-radius-sm);
  font-family:"Matter",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:12px; word-break:break-word;
}

/* Focus styles (accessible) */
:where(.upload-area, .upload-btn):focus{
  outline:3px solid color-mix(in oklab, var(--gd-blue-40));
  outline-offset:2px;
}

/* Motion */
@keyframes slideIn{from{opacity:0; transform:translateY(-10px)} to{opacity:1; transform:translateY(0)}}