/* Importerer Google-fonten Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap');


/* Reset av margin/padding og mer forutsigbar sizing */
*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* Standard stil for hele siden */
html {
  overflow-y: scroll;
}

body {
  font-family: 'Roboto', sans-serif;
  background: #f4f8f5;
  line-height: 1.6;
}

/* Standard container brukt på flere sider */
.container {
  margin: auto;
  max-width: 1320px;
}

/* Punktlister */
ul { 
  list-style: none;
  font-size: 400;
}

/* Standard stil for lenker */
a {
  color: #333;
  text-decoration: none;
}

/* Overskrifter */
h1, h2 {
  font-weight: 400;
  line-height: 1.2;
}

/* Standard avsnittstekst */
p {
  margin: 10px 0;
  font-size: 18px;
}

/* Bilder fyller containeren */
img {
  width: 100%;
}


/* NAVBAR */

/* Seksjonen som inneholder navbaren */
.section_navbar {
  background-color: #ffffff;
}

/* Selve navbar-layouten */
.navbar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  height: 50px;
  align-items: center;
  background-color: #ffffff;
  padding: 0 0px;
}

/* Lenker i navbaren */
.navbar a {
  color: #2f4f4f;
  padding: 10px 20px;
  margin: 0 5px;
  font-size: 20px;
  text-decoration: none;
  white-space: nowrap;
}

/* Hover-effekt på menylenker */
.navbar a:hover{
  border-bottom: #568c63 4px solid;
}

/* Navigasjonslisten */
.navbar ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0;
  padding: 0;
}

.navbar li {
  margin: 0;
  padding: 0;
}

/* Logo-tekst */
.navbar .logo {
  font-weight: 400;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Grønn tekst (brukes i logo/titler) */
.text-logo {
  color: #568c63;
}


/* FOOTER */

.section_footer{
  background-color: #ffffff;
}

/* Selve footer-layouten */
.footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 50px;
  align-items: center;
  background-color: #ffffff;
  padding: 0 0px;
}


/* RESPONSIVE NAVBAR */

/* Mellomstørrelse: krymper font og padding før stacking */
@media(max-width:1100px){
  .navbar a {
    font-size: 16px;
    padding: 8px 10px;
    margin: 0 2px;
  }
}

/* Justeringer for mobil */
@media(max-width:900px){

  /* Navbar blir vertikal */
  .navbar {
    height: 160px;
    flex-direction: column;
  }

  /* Mindre font på mobil */
  .navbar a {
    font-size: 15px;
    padding: 5px 20px;
  }

  /* Meny blir kolonne */
  .navbar ul {
    display: flex;
    flex-direction: column;
  }

  /* Hover-effekt på mobil */
  .navbar a:hover{
    color: #568c63;
    border-bottom: #568c63 2px solid;
  }
}

/* BOOTSTRAP KONFLIKT-FIX */

/* Fjerner border og shadow fra bootstrap-navbar */
.section_navbar,
.section_navbar .navbar {
  border: 0 !important;
  box-shadow: none !important;
}

/* Sørger for at navbaren ikke presser innholdet */
.navbar {
  height: auto;
  padding: 10px 0;
}


/* FOOTER */

.section_footer {
  background-color: #ffffff;
  margin-top: 60px;
}

.footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 50px;
  align-items: center;
  background-color: #ffffff;
  padding: 0;
  border-top: 1px solid rgba(0,0,0,0.10);
}

/* Teksten i footeren */
.footer-text {
  font-size: 18px;
  color: #2f4f4f;
}

/* STICKY FOOTER */

/* Sørger for at footer alltid ligger nederst på siden */
.layout-body {
  min-height: 100vh;
  padding-bottom: 50px;
  position: relative;
}

/* Footer låses nederst */
.section_footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 999;
}


/* SCROLL TO TOP KNAPP */

/* Pil som lar brukeren scrolle til toppen */
.to-top {
  margin-left: auto;
  font-size: 22px;
  color: #2f4f4f;
  text-decoration: none;
  padding: 0 10px;
  display: flex;
  align-items: center;
  transition: transform 0.15s ease;
}

/* Hover-effekt */
.to-top:hover {
  transform: translateY(-3px);
  color: #568c63;
}


/* Flash-meldinger i main skal ikke lage ekstra mellomrom */
.page-content > .alert {
  margin-bottom: 0;
}

/* Smooth scrolling når man hopper til anker på siden */
html {
  scroll-behavior: smooth;
}


/* ===== SHARED DATA PAGES (routes, shipments, your_data) ===== */

.your-data-page {
  padding: 50px 0 70px 0;
}

.your-data-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 30px;
}

.your-data-header h1 {
  font-size: 2.15rem;
  font-weight: 800;
  color: #2f4f4f;
  margin-bottom: 8px;
}

.your-data-header p {
  color: #5f7268;
  font-size: 1.02rem;
  margin: 0;
}

/* Shared action buttons used on data pages (My Routes, My Shipments) */
.btn-add-route {
  background-color: #568c63;
  color: white;
  border-radius: 12px;
  padding: 11px 22px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.btn-add-route:hover {
  background-color: #47764f;
  color: white;
}

.btn-delete {
  display: block;
  border-radius: 8px;
  padding: 5px 14px;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  border: 1.5px solid #c0392b;
  color: #c0392b;
  background: #fff5f5;
}

.btn-delete:hover {
  background: #fde8e8;
  color: #a93226;
  border-color: #a93226;
}

.btn-delete-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Card wrapper */
.data-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 28px 28px 24px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
  border: 1px solid #edf2ee;
}

/* Empty state */
.empty-state-text {
  margin: 0;
  color: #6b7d73;
  line-height: 1.7;
}

/* Tables */
.mode-table-wrapper,
.entries-table-wrapper {
  overflow-x: auto;
}

.mode-table,
.entries-table {
  width: 100%;
  border-collapse: collapse;
}

.mode-table thead th,
.entries-table thead th {
  text-align: left;
  font-size: 0.92rem;
  color: #6b7d73;
  font-weight: 700;
  padding: 12px 10px;
  border-bottom: 1px solid #e7efe9;
}

.mode-table tbody td,
.entries-table tbody td {
  padding: 14px 10px;
  border-bottom: 1px solid #edf2ee;
  color: #2f4f4f;
  font-size: 0.96rem;
}

.mode-table tbody tr:last-child td,
.entries-table tbody tr:last-child td {
  border-bottom: none;
}

.saved-entries-card {
  margin-bottom: 32px;
}

@media (max-width: 768px) {
  .data-card {
    padding: 22px 20px;
  }

  .your-data-page {
    padding: 38px 0 60px 0;
  }
}



/* AUTH PAGES */


/* Sentraliser login/register-sidene midt på skjermen */
.auth-section {
  min-height: calc(100vh - 100px);
  padding: 40px 20px 90px;
  background: #f4f8f5;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Kortet som inneholder login/register-skjema */
.auth-card {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  background: #F0E8D9;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  padding: 30px 30px 24px;
}


/* Tittel på auth-sidene */
.auth-title {
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 14px;
  color: #111;
}

/* Avstand mellom feltene i skjemaet */
.auth-form .form-group {
  margin-bottom: 14px;
}

/* Labels over inputfeltene */
.auth-form label {
  display: block;
  font-size: 16px;
  margin-bottom: 6px;
  color: #111;
}


/* INPUT-FELTER */

/* Standard inputfelt */
.auth-input {
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.20);
  background: #fdfaf6;
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Effekt når feltet er aktivt */
.auth-input:focus {
  border-color: #568c63;
  box-shadow: 0 0 0 4px rgba(86, 140, 99, 0.18);
}

select.auth-input {
  cursor: pointer;
}

select.auth-input:hover {
  border-color: rgba(0,0,0,0.40);
}


/* SUBMIT-KNAPP */
.auth-btn {
  width: 100%;
  border: 1px solid #568c63;
  background: #568c63;
  color: #fff;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.15s ease;
  margin-top: 10px;
}

.auth-btn:hover {
  transform: translateY(-1px);
  filter: brightness(0.97);
}


/* FOOTER I LOGIN/REGISTER-SIDENE */

.auth-footer {
  border-top: 1px solid rgba(0,0,0,0.10);
  margin-top: 16px;
  padding-top: 14px;
  font-size: 15px;
  color: #111;
  text-align: center;
}

/* Lenker i auth-footer */
.auth-footer a {
  color: #568c63;
}

.auth-footer a:hover {
  text-decoration: underline;
}


.auth-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #111;
}

/* MOBIL */
@media (max-width: 480px) {

  /* Mindre padding på mobil */
  .auth-card {
    padding: 20px 18px 16px;
    border-radius: 14px;
  }

  /* Mindre tittel */
  .auth-title {
    font-size: 24px;
  }
}
/* ===== SHARED PAGE COMPONENTS ===== */

/* Standard page container — max 1100px, sentrert */
.page-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 20px;
}

/* Grønn-tonet bakgrunn brukt på info-sider (About Us, Methodology, Dashboard) */
.page-section-bg {
  background: #f4f8f5;
}

/* Kort med grønn venstrekant — brukt for seksjoner med innhold */
.page-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-left: 4px solid #5A8F6A;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

/* Kort med grønn toppkant og hover-løft — brukt for grid-elementer */
.page-feature-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-top: 3px solid #5A8F6A;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
}


/* ===== BRUKERMENY I NAVBAR ===== */

/* Hele dropdown-containeren */
.dropdown-user {
  position: relative;
  display: flex;
  align-items: center;
}

/* Knappen med ikon + brukernavn */
.dropdown-user-btn {
  background: none;
  border: none;
  color: #568c63;
  font-weight: 700;
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 10px;
  white-space: nowrap;
}

/* Hover-effekt */
.dropdown-user-btn:hover {
  opacity: 0.9;
}

/* Selve menyen som dukker opp */
.dropdown-user-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 180px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  padding: 8px 0;
  z-index: 999;
}

/* Lenker inni dropdownen */
.dropdown-user-menu a {
  display: block;
  padding: 12px 16px;
  color: #2f4f4f;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

/* Hover på lenkene */
.dropdown-user-menu a:hover {
  background-color: #f2f7f3;
  color: #568c63;
}

/* Vis menyen når man holder over */
.dropdown-user:hover .dropdown-user-menu {
  display: block;
}