@import url("root.css");

/* PC-visning (over 1024px) */
@media (min-width: 1101px) {
  :root {
    --w-ID-klubb: 3rem;
    --w-klubb: 10rem;
    --w-klubb-flag: 15px;
    --w-est: 2rem;
    --w-est-flag: 15px;
    --w-count: 50px;
    --w-ID-land: 2rem;
    --w-ID-fylke: 2rem;
    --w-land: 5rem;
    --w-region: 10rem;
    --w-aksjon: 3rem;
  }
}

/* Mobilvisning (fra 768px opptil 1024px) */
@media (371px <= width <= 1100px) {
  :root {
    --w-ID-klubb: 3rem;
    --w-klubb: 10rem;
    --w-ID-land: 0rem;
    --w-ID-fylke: 0rem;
    --w-land: 5rem;
    --w-region: 10rem;
    --w-aksjon: 3rem;
  }
  th.col-longitude,
  td.col-longitude,
  th.col-latitude,
  td.col-latitude,
  th.col-hull,
  td.col-hull,
  th.col-logo,
  td.col-logo,
  th.col-hjemmeside,
  td.col-hjemmeside,
  th.col-ID-bane,
  td.col-ID-bane,
  th.col-ID-land,
  td.col-ID-land,
  th.col-ID-fylke,
  td.col-ID-fylke {
    display: none;
  }
}

/* Mobilvisning (opptil 768px) */
@media (max-width: 600px) {
  :root {
    --w-ID-klubb: 0rem;
    --w-klubb: 4rem;
    --w-ID-bane: 0rem;
    --w-ID-land: 0rem;
    --w-ID-fylke: 0rem;
    --w-bane: 4rem;
    --w-land: 4rem;
    --w-region: 4rem;
    --w-aksjon: 3rem;
    --w-hull: 3rem;
    --w-logo: 0rem;
    --w-web: 1.2rem;
    --w-longitude: 0rem;
    --w-latitude: 0rem;

  }
  th.col-logo,
  td.col-logo,
  th.col-longitude,
  td.col-longitude,
  th.col-latitude,
  td.col-latitude,
  th.col-hjemmeside,
  td.col-hjemmeside,
  th.col-hull,
  td.col-hull,
  th.col-ID-klubb,
  td.col-ID-klubb,
  th.col-ID-bane,
  td.col-ID-bane,
  th.col-ID-land,
  td.col-ID-land,
  th.col-ID-fylke,
  td.col-ID-fylke {
    display: none;
  }
}

html {
  margin: 0;
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;    /* Centers vertically */
  color: var(--c-data-txt);   /* farge på standard tekst */
}

body {

  background-attachment: fixed;
  background-color: var(--c-colour-bg);

  background-image: var(--c-image-bg);

  background-size: 400px, 200px;

  background-repeat: repeat;
}


/* Innhold over tabellen skal scrolle ut av bildet. */
.intro {
  display: flex;
  align-items: center;
/*  justify-content: space-between; /* sender elementene til hver sin side */
  padding: 0px 10px;
  width: 100%;
  gap: 10px;           /* 5px mellom pil og blokk 2 */

}
#grad1 {
  background-color: #202020; /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom, var(--c-head-bg2), var(--c-head-bg), var(--c-head-bg2));
  color: var(--c-head-txt2);
}

.inputFieldKlubb {
  background-color: var(--c-form-bck); /* For browsers that do not support gradients */
  color: var(--c-data-txt);
  width: var(--w-klubb);
}

.inputFieldEst {
  background-color: var(--c-form-bck); /* For browsers that do not support gradients */
  color: var(--c-data-txt);
  width: var(--w-est);
}

.updated {
    background-color: #e0ffe0 !important;
    transition: background-color 1s ease !important;
}

/* Wrapper for tabellen, ingen egen vertical scroll */
.table-wrap {
  padding: 0;
}

table {
  border-collapse: separate;
  border-spacing: 0;

  /* Viktig for ellipsis og faste kolonnebredder */
  table-layout: fixed;
  /* width: 100%; */
  width: calc(
    var(--w-ID-klubb) +
    var(--w-klubb) +
    var(--w-klubb-flag) +
    var(--w-est) +
    var(--w-est-flag) +
    var(--w-count) +
    var(--w-ID-land) +
    var(--w-ID-fylke) +
    var(--w-land) +
    var(--w-region) +
    var(--w-aksjon)
  );
}


/*#search {
  margin-left:1rem;
  padding:0.3rem;
  font-size:1rem;
  background: var(--c-form-fld);
  color: var(--c-data-txt);
}*/

.search-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--c-data-txt);
  border-radius: 20px;
  padding: 5px 10px;
  background: var(--c-form-fld);
}

.search-box input {
  border: none;
  outline: none;
  padding: 2px 30px 2px 30px; /* plass til ikoner */
  font-size: 14px;
  background: var(--c-form-fld);
  color: var(--c-data-txt);
}

#searchInput {
  width: 50px;
}

#searchInput::placeholder {
  color: var(--c-data-txt);
}

.icon {
  position: absolute;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

.search-icon {
  left: 8px;
  color: var(--c-data-txt);
}

.clear-icon {
  right: 8px;
  color: var(--c-data-txt);
  display: none; /* skjult til tekst finnes */
}

#newClubRow td {
  position: sticky;
  top: 25px; /* rett under thead */
  background: var(--c-head-bg3);
  z-index: 1;
  padding: 0.2rem 0.5rem;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 2;
/*  background: var(--c-head-bg);*/
  background: var(--c-head-bg3);
  color: var(--c-head-txt);
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid var(--c-border);
  padding: 0.2rem 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

tbody td {
  border-bottom: 1px solid var(--c-border);
  padding: 0rem 0.5rem;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* ellipsis for lange tekster */
}

tbody tr.bane-row:nth-of-type(odd) { background: var(--c-row-alt); } /* gir annenhver line forskjelig farge i banerad for alle banerader uansett modus */
tbody tr.bane-row:nth-of-type(even) { background: var(--c-row-alt2); } /* gir annenhver line forskjelig farge i banerad for alle banerader uansett modus */
tbody tr.bane-row:hover { background: var(--c-hover); }     /* viser aktiv banerad i alle modus */
tr.group-land > td:hover { background: var(--c-hover); }     /* viser aktiv landgrupperad i alle modus */
tr.group-region > td:hover { background: var(--c-hover); }     /* viser aktiv regiongrupperad i alle modus */

/* Faste kolonnebredder (både th og td må ha denne for table-layout: fixed) */
th.col-ID-klubb,   td.col-ID-klubb   { width: var(--w-ID-klubb); }
th.col-klubb,  td.col-klubb  { width: var(--w-klubb); }
th.col-klubb-flag,  td.col-klubb-flag  { width: var(--w-klubb-flag); }
th.col-est,  td.col-est  { width: var(--w-est); }
th.col-est-flag,  td.col-est-flag  { width: var(--w-est-flag); }
th.col-total,  td.col-total  { width: var(--w-count); }
th.col-ID-land,   td.col-ID-land   { width: var(--w-ID-land); }
th.col-land,   td.col-land   { width: var(--w-land); }
th.col-ID-fylke,   td.col-ID-fylke   { width: var(--w-ID-fylke); }
th.col-region, td.col-region { width: var(--w-region); }
th.col-aksjon, td.col-aksjon { width: var(--w-aksjon); text-overflow: clip; } /* clip to prevent ellipsis ... */

td.col-aksjon {
  position: relative;    /* referanse for absolutte menyen */
  overflow: visible;     /* ikke klipp */
}

/* Sorterbar header: ikon + fokus */
.sortable {
  cursor: pointer;
  user-select: none;
}
.sort-icon { margin-left: 6px; opacity: 0.7; }
.sortable:focus { outline: 2px solid var(--c-active); outline-offset: -2px; }

/* Grupperader (accordion) */
tr.group-land > td,
tr.group-region > td {
  font-weight: 600;
  border-bottom: 1px solid var(--c-border);
  cursor: pointer;
  position: relative;
}

/* Land-gruppe: tydelig bakgrunn + venstre kant + ikon */
tr.group-land > td {
  background: var(--c-group-land);
  color: var(--c-group-land-txt);     /* tekstfarge på Landmodusraden */
  border-left: 4px solid var(--c-col-land-left);
}

/* Region-gruppe: annen bakgrunn + innrykk + venstre kant + ikon */
tr.group-region > td {
  background: var(--c-group-region);
  color: var(--c-group-region-txt);     /* tekstfarge på Regionmodusraden */
  border-left: 4px solid var(--c-col-region-left);
  padding-left: 1.75rem; /* ekstra innrykk for hierarki */
}
tr.group-region > td::before {
/*  content: "►➥";*/
  content: "╰➤";
  display: inline-block;
  margin-right: 0.2rem;
  margin-left: -1rem; /* flytt ikon inn i innrykket */
}

.badge {
  display: inline-block;
/*  vertical-align: center;*/
  padding: 2px 8px;                  /* padding top/bottom and left/reight */
  border-radius: 999px;
  background: var(--c-badge-bck);      /* Bakgrunnfarge på tall bobla i land og region modus radene */
  color: var(--c-badge);
  font-size: var(--c-badge-bck-size);
  margin-left: 8px;
}

/* Knapper */
.btn-clear, .btn {
  color: var(--c-head-txt);
  border-color: transparent;
  background: transparent;
}

.btn:hover {
  background: #f8fafc;
  cursor: pointer;
}

.btn-danger {
  color: #609060;
  border-color: transparent;
  background: transparent;
  height: 1.8rem; /* juster etter design */
  line-height: 1.8rem;
}

.btn-danger:hover {
  color: #000000;
  background: #ff4040;
  border-color: #ff0000;
}

/* Små UI-elementer for modusindikasjon */
.bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid var(--c-border);
  background: #fff;
/*  position: sticky;*/
  top: 41px; /* plasser rett under thead når det klistrer */
  z-index: 1;
}
.mode { font-weight: 600; }
.link {
  color: var(--c-active);
  text-decoration: none;
  cursor: pointer;
}
.link:hover { text-decoration: underline; }

/* Landmodus – annenhver rad i Land-kolonnen */
table.land-mode tbody tr.bane-row:nth-of-type(odd) td.col-land {
  background: var(--c-col-land-bg);
  color: var(--c-col-land-txt);
}
/* Når raden er hovered, overstyr også col-land */
table.land-mode tbody tr.bane-row:hover td.col-land {
  background: var(--c-hover);
/*  color: var(--c-hover-txt); /* hvis du vil endre tekstfargen også */
}

/* regionmodus – annenhver rad i region-kolonnen */
table.region-mode tbody tr.bane-row:nth-of-type(odd) td.col-region {
  background: var(--c-col-region-bg);
  color: var(--c-col-region-txt);
}
/* Når raden er hovered, overstyr også col-region */
table.region-mode tbody tr.bane-row:hover td.col-region {
  background: var(--c-hover);
  color: var(--c-hover-txt); /* hvis du vil endre tekstfargen også */
}

/* ===============================
   Accordion-panel (keyframes)
   =============================== */

/* Selve panel-containeren vi animerer (legges i en egen <tr class="panel-row"><td><div class="panel">... */
.panel {
  height: 0;
  visibility: hidden;
  overflow: hidden;
  opacity: 0.3;
}

/* Keyframes (animerer mellom 0 og målt høyde via --h) */
@keyframes accordion-open {
  from { height: 0; opacity: 0.3; }
  to   { height: var(--h); opacity: 1; }
}
@keyframes accordion-close {
  from { height: var(--h); opacity: 1; }
  to   { height: 0; opacity: 0.3; }
}

/* Tilstander (styres av JS) */
.panel.is-opening,
.panel.is-closing {
  visibility: visible;
}
.panel.is-opening {
  animation: accordion-open var(--acc-duration) var(--acc-ease) forwards;
}
.panel.is-closing {
  animation: accordion-close var(--acc-duration) var(--acc-ease) forwards;
}
.panel.is-open {
  height: auto;
  visibility: visible;
  opacity: 1;
  overflow: visible;
}

/* Panel-rad (en ekstra <tr> som spenner alle kolonner) */
tr.panel-row > td {
  padding: 0;
  background: transparent; /* lar arvede tabellfarger skinne gjennom */
  border-bottom: none;     /* vi håndterer avstand inne i panelet */
}

.panel-table {
/*  border-collapse: separate;*/
  border-spacing: 0;
  table-layout: fixed;
}

/* Redusert bevegelse: gjør animasjon “instant” */
@media (prefers-reduced-motion: reduce) {
  .panel.is-opening,
  .panel.is-closing {
    animation-duration: 1ms;
  }
}

.align-left   { text-align: left; }
.align-center { text-align: center; }
.align-right  { text-align: right; }

/* ===== Meny-knapp med tre prikker → kryss ===== */

td.col-aksjon {
  position: relative; /* referanse for absolutte menyelementer */
}

.menu-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  transition: background 200ms ease;
}

.menu-btn:hover {
  background: rgba(0,0,0,0.06);
}

.menu-icon {
  position: relative;
  width: 18px;
  height: 18px;
}