/* /opt/docconv/static/style.css */
:root{
  --primary:#1976d2;
  --primary-contrast:#fff;
  --muted:#9e9e9e;
  --bg:#f5f5f5;
  --card:#fff;
  --border:#e0e0e0;
}

*{box-sizing:border-box}
body { font-family: Arial, sans-serif; background:var(--bg); color:#222; margin:0; padding:0;}
.container { background:var(--card); padding:18px; margin:18px auto; max-width:820px; border-radius:10px; box-shadow:0 2px 16px rgba(0,0,0,0.06); }
h1 { margin-top:0; font-size:1.4rem; }

button { font-family:inherit; }

.primary { padding:10px 14px; border:none; background:var(--primary); color:var(--primary-contrast); border-radius:8px; cursor:pointer; font-weight:600; }
.secondary { padding:8px 12px; border:none; background:var(--muted); color:var(--primary-contrast); border-radius:8px; cursor:pointer; margin-left:8px; }
button:disabled { background:#bbb; cursor:default; color:#fff; opacity:0.9; }

.upload-area { display:flex; flex-direction:column; gap:10px; }
.drop-zone {
  border:2px dashed #cfd8dc;
  border-radius:10px;
  padding:22px;
  text-align:center;
  background:#fafafa;
  position:relative;
  overflow:hidden;
}
.drop-zone.dragover { background:#e3f2fd; border-color:#64b5f6; }

.drop-content { display:flex; flex-direction:row; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; }
.drop-text { color:#616161; font-size:0.98rem; max-width:70%; }
.progress { width:100%; height:14px; background:#eee; border-radius:8px; overflow:hidden; margin-top:6px; }
.bar { height:100%; background: linear-gradient(90deg,#4caf50,#2e7d32); width:0%; transition:width 0.3s; }

.files-wrapper { margin-top:14px; }
.files-list { margin-top:8px; }
.file-item { display:flex; justify-content:space-between; align-items:center; padding:10px; border-radius:8px; background:#fff; border:1px solid #f0f0f0; margin-bottom:8px; box-shadow:0 1px 2px rgba(0,0,0,0.02); }
.file-name { font-size:0.95rem; color:#222; word-break:break-word; }
.file-actions button { margin-left:8px; }

.small { font-size:0.9rem; color:#555; margin-top:6px; }

.status-wrapper { margin-top:14px; }

/* результат: аккуратно и адаптивно */
.result-heading { font-weight:700; margin-bottom:10px; color:#333; }
.file-boxes { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; align-items:flex-start; }
.file-box {
  background: #fff;
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  min-width: 160px;
  max-width: 100%;
  word-break: break-word;
}
.file-box .name { font-weight:600; color:#222; }
.error-message { color: #c62828; font-weight:700; margin-top:10px; }

/* -- INPUT behavior:
   На десктопе input скрыт (off-screen) и открывается через кнопку chooseBtn.
   На устройствах с coarse pointer / без hover (мобильные) input растягивается поверх .drop-zone,
   чтобы нативный выбор файлов открывался при касании любой области.
*/
.drop-zone input[type="file"]{
  /* default: скрыть off-screen (desktop) */
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Mobile/touch devices: input overlay to open native picker by touch */
@media (hover: none) and (pointer: coarse) {
  .container { margin:12px; padding:14px; }
  .drop-zone { padding:18px; }
  .drop-zone input[type="file"]{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    opacity:0;
    cursor:pointer;
    z-index:10;
    pointer-events:auto;
  }
  /* на мобильных кнопку выбора можно скрыть либо оставить мелкой; скрываем, чтобы не было двух кнопок */
  .drop-content button { display:none; }
}

/* Центрируем кнопки результата и делаем одинаковый размер */
#resultButtons {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
#resultButtons button {
  min-width:180px;
  padding:10px 14px;
  border-radius:8px;
  font-weight:600;
  flex: 0 0 180px;
}

/* Адаптив для маленьких экранов */
@media (max-width: 600px) {
  .container { margin:8px; padding:12px; border-radius:8px; }
  .drop-content { flex-direction:column; gap:10px; }
  .drop-text { max-width:100%; font-size:0.95rem; }
  .primary, .secondary { width:100%; display:block; }
  .files-actions { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
  .file-item { flex-direction:column; align-items:flex-start; gap:8px; }
  .file-actions { display:flex; width:100%; justify-content:flex-end; }
  .file-boxes { flex-direction:column; }
  #resultButtons { flex-direction:column; gap:10px; }
  #resultButtons button { width:100%; min-width:0; flex:0 0 auto; }
  .file-box { width:100%; }
}