/* v0397 — portalens egen filväljare.
 *
 * VARFÖR
 * Webbläsarens <input type=file> ritar sin EGEN knapp, med sin egen text, på
 * webbläsarens språk. En kund med engelsk portal fick "Välj filer" och "Ingen
 * fil har valts" mitt i en engelsk sida (v0366). Texten går inte att översätta,
 * men den går att låta bli att visa.
 *
 * Portalen har redan mönstret: kalendern gömmer sitt filfält och ritar en egen
 * knapp bredvid (.event-file-picker / .event-file-input, v0110). Det här är
 * samma mönster, gjort delat, så att de sex ställen som fortfarande visade
 * webbläsarens knapp får portalens.
 *
 * FUNGERAR UTAN JAVASCRIPT
 * Hela kontrollen ligger inuti en <label>, så ett klick var som helst öppnar
 * filväljaren utan en rad JavaScript. Skriptet gör bara en sak: skriver ut
 * vilken fil som valts. Utan skript står "Ingen fil vald" kvar — filen är
 * ändå vald och skickas med.
 */

.filval { display: grid; gap: 3px; min-width: 0; }

/* Rubriken över kontrollen, samma vikt och storlek som portalens övriga
   fältrubriker (.team-import-upload label>span). */
.filval > .filval-rubrik { display: block; margin-bottom: 3px; font-size: 10px; font-weight: 800; }

/* Själva kontrollen: en ruta i samma form som ett <select> bredvid, med vår
   knapp inuti. Höjden följer portalens fälthöjd (38 px, v0101/v0079). */
/* Selektorn börjar på .app-shell med flit. pairs-v0079 sätter
   `.team-import-upload label>span{display:block;margin-bottom:3px}` — den
   träffar ALLA span direkt i etiketten, alltså även den här rutan, och gjorde
   den till ett block med 3 px luft under. Mätt gav det raden två olika
   bottenlinjer (185 och 188 px). Ett klassnamn räcker inte mot en selektor med
   klass + två element; .app-shell gör det. */
.app-shell .filval-kontroll,
.filval-kontroll {
  display: flex; align-items: center; gap: 8px; margin: 0;
  box-sizing: border-box; min-width: 0; height: 38px; min-height: 38px; padding: 0 8px;
  border: 1px solid var(--line, #d8e0d9); border-radius: 7px; background: #fff;
  font-size: 11px; font-weight: 400; cursor: pointer;
}
.filval:hover .filval-kontroll, .filval-kontroll:hover { border-color: #b8c9bb; }

/* Filfältet göms på samma sätt som kalenderns (.event-file-input) — inte med
   display:none, som tar bort det ur formuläret i vissa webbläsare, utan
   nedkrympt och genomskinligt. Det ligger kvar och skickas med som vanligt. */
.filval-input {
  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;
  min-height: 0 !important; max-height: 1px !important;
  border: 0 !important; opacity: 0 !important;
}

/* Vår knapp. Ett <span>, inte en <button> — en knapp inuti en label skickar
   formuläret i vissa webbläsare. Formen sätts här och ärver inte, så den kan
   inte tappas om .button ändras. */
.app-shell .filval .filval-knapp,
.app-shell .filval-kontroll .filval-knapp,
.filval-knapp {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; height: 28px; padding: 0 12px;
  border: 1px solid #cdd8d1; border-radius: 7px; background: #f2f6f2;
  color: #173f2b; font-size: 11px; font-weight: 700; white-space: nowrap;
  cursor: pointer;
}
.filval:hover .filval-knapp, .filval-kontroll:hover .filval-knapp { background: #e8f0e9; border-color: #b8c9bb; }

/* Tangentbord: fokus syns på knappen fast fokus tekniskt ligger på fältet. */
.filval-input:focus-visible ~ .filval-knapp { outline: 2px solid #c8a93a; outline-offset: 2px; }

/* Filnamnet. Klipps med … i stället för att tvinga isär raden. */
.app-shell .filval .filval-status,
.app-shell .filval-kontroll .filval-status,
.filval-status {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted, #68756d); font-size: 11px;
}
.har-fil .filval-status { color: #173f2b; font-weight: 600; }

/* Hjälpraden under (tillåtna format, största storlek). */
.filval > small { display: block; margin-top: 3px; color: var(--muted, #68756d); font-size: 9px; }

/* ── Importformulären: allt på EN rad ─────────────────────────────────────
 * Före v0397 låg delarna på tre olika höjder i hundteamsimporten (mätt: topp
 * 143 / 130 / 160 px), och i användarimporten var etiketten 1333 px bred för
 * ett fält på 282 px, så knapparna hamnade tusen pixlar från fältet.
 *
 * VAD SOM GJORDE DET
 * Hjälpraden ("XLSX, CSV … högst 10 MB") låg INUTI kolumnen, under filfältet.
 * Den gjorde kolumnen högre än grannarna, och då kunde rutnätet inte lägga
 * kontrollerna i linje hur det än justerades. Hjälpraden har därför flyttat ut
 * ur raden och står under formuläret. Kolumnerna innehåller nu bara rubrik och
 * kontroll, lika höga allihop.
 *
 * VARFÖR KNAPPEN INTE ÄR LIKA HÖG SOM FÄLTEN
 * controls-v0117 sätter `height:31px!important` på varje .button i portalen —
 * det är portalens beslutade knapphöjd (--linber-control-height), och ett
 * !important går inte att vinna över med en senare regel utan att sätta ett
 * eget !important, alltså börja samma kapplöpning en gång till. Fälten är
 * 38 px sedan pairs-v0079. Raden bottenjusteras därför i stället: kontrollerna
 * och knappen slutar på samma linje, vilket är det ögat läser som en rad.
 */
.app-shell .team-import-upload,
.app-shell .user-import-upload {
  display: grid; align-items: end; gap: 10px;
}
.app-shell .team-import-upload { grid-template-columns: 250px minmax(280px, 420px) auto; }
/* justify-content:start gör att knappkolumnen lägger sig intill fältet i
   stället för att skjutas ut till formulärets högerkant — mätt låg knapparna
   annars 1000 px från rutan de hör ihop med. */
.app-shell .user-import-upload { grid-template-columns: minmax(280px, 460px) auto; justify-content: start; }

.app-shell .team-import-upload > label,
.app-shell .user-import-upload > label {
  display: grid; gap: 0; align-content: end; min-width: 0;
}
.app-shell .team-import-upload > label > span:first-child,
.app-shell .user-import-upload > label > span:first-child {
  display: block; margin: 0 0 3px; font-size: 10px; font-weight: 800; line-height: 14px;
}
/* Fälten: samma höjd som portalens övriga fält i de här formulären. */
.app-shell .team-import-upload select,
.app-shell .user-import-upload select {
  box-sizing: border-box; width: 100%; height: 38px; min-height: 38px;
}
.app-shell .user-import-upload > .form-actions { display: flex; gap: 7px; align-items: flex-end; }

/* Hjälpraden under formuläret, inte i raden. */
.import-hjalp { margin: 7px 0 0; color: var(--muted, #68756d); font-size: 10px; }

@media (max-width: 920px) {
  .app-shell .team-import-upload { grid-template-columns: minmax(180px, 1fr) minmax(240px, 1.4fr) auto; }
}
@media (max-width: 680px) {
  .app-shell .team-import-upload,
  .app-shell .user-import-upload { grid-template-columns: 1fr; align-items: stretch; }
}