/* Galvenie stili lapai */
body {
  font-family: Arial, sans-serif; /* Teksta fonts */
  background-color: #333;          /* Fona krāsa tumša */
  color: #fff;                    /* Teksta krāsa gaiša */
  margin: 0;                     /* Noņemam noklusēto ārējo atstarpi */
  padding: 20px;                 /* Iekšējā atstarpe */
}

/* Galvenā satura konteineris */
main {
  max-width: 800px;              /* Maksimālais platums */
  margin: 0 auto;                /* Horizontāla centrēšana */
  background: #444;              /* Tumšāka fona krāsa */
  padding: 20px;                 /* Iekšējā atstarpe */
  border-radius: 10px;           /* Noapaļoti stūri */
}

/* Navigācijas joslas izkārtojums */
nav {
  display: flex;                 /* Elastīgs izvietojums */
  justify-content: space-between; /* Starp elementiem atstarpe */
  align-items: center;           /* Vertikāla izlīdzināšana */
  flex-wrap: wrap;               /* Elementi var iet pa vairākām rindām */
  gap: 20px;                    /* Attālums starp elementiem */
  margin-bottom: 20px;           /* Atstarpe zem navigācijas */
}

/* Navigācijas kreisā puse - saraksts ar pogām */
.nav-left ul {
  display: flex;                 /* Saraksts izkārtojas horizontāli */
  justify-content: center;       /* Pogas centrētas */
  gap: 10px;                    /* Atstarpe starp pogām */
  padding: 0;                   /* Noņem noklusēto iekšējo atstarpi */
  margin: 0;                    /* Noņem noklusēto ārējo atstarpi */
}

/* Noņemam saraksta punktus navigācijā */
.nav-left ul li {
  list-style: none;
}

/* Navigācijas labā puse - lietotāja vārds un pogas */
.nav-right {
  display: flex;
  align-items: center;           /* Vertikāla izlīdzināšana */
  gap: 15px;                    /* Atstarpe starp elementiem */
}

/* Lietotāja vārda stils */
.user-name {
  color: #007bff;               /* Zila krāsa */
  font-weight: bold;            /* Treknraksts */
}

/* Navigācijas pogu pamata stils */
nav button {
  padding: 10px 20px;           /* Iekšējā atstarpe */
  font-size: 16px;              /* Fonta izmērs */
  font-weight: bold;            /* Treknraksts */
  border: 2px solid #007bff;    /* Zils apmales rāmis */
  border-radius: 20px;          /* Noapaļotas malas */
  background-color: transparent; /* Caurspīdīgs fons */
  color: #007bff;               /* Zils teksts */
  cursor: pointer;              /* Pele mainās uz rādītāju */
  transition: all 0.3s ease;    /* Pārejas efekts */
}

/* Navigācijas pogu hover efekts */
nav button:hover {
  background-color: rgba(0, 123, 255, 0.2); /* Viegls zilgans fons */
}

/* Aktīvās navigācijas pogas stils */
nav button.active {
  background-color: #007bff;   /* Zils fons */
  color: white;                /* Balts teksts */
}

/* Logout pogas īpašais stils */
.logout-btn {
  border-color: #dc3545 !important; /* Sarkana apmale */
  color: #dc3545 !important;        /* Sarkans teksts */
}

/* Logout pogas hover efekts */
.logout-btn:hover {
  background-color: rgba(220, 53, 69, 0.2) !important; /* Viegls sarkans fons */
}

/* Formu pamatstils - virziens un atstarpes */
form {
  display: flex;
  flex-direction: column;       /* Elementi vertikālā kolonnā */
  gap: 10px;                   /* Atstarpe starp elementiem */
}

/* Formu virsrakstu stils */
label {
  font-size: 18px;
}

/* Ievades lauku un tekstlodziņu stils */
input,
textarea {
  padding: 10px;                /* Iekšējā atstarpe */
  font-size: 16px;
  border: none;                 /* Bez apmales */
  border-radius: 5px;           /* Nelieli noapaļojumi */
  background-color: #555;       /* Tumšāka fona krāsa */
  color: #fff;                  /* Balts teksts */
}

/* Vispārējā poga */
button {
  padding: 12px 25px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.1s ease;
  margin-top: 10px;
}

/* Apstiprināšanas pogas stils */
button[type="submit"] {
  background-color: #007bff;    /* Zils fons */
  color: white;
}

/* Apstiprināšanas pogas hover efekts un neliels palielinājums */
button[type="submit"]:hover {
  background-color: #0056b3;    /* Tumšāka zila */
  transform: scale(1.05);       /* Nedaudz palielinās */
}

/* Atpakaļ pogas stils */
.back-button {
  background-color: #6c757d;    /* Pelēka */
  color: white;
}

/* Atpakaļ pogas hover efekts */
.back-button:hover {
  background-color: #545b62;    /* Tumšāka pelēka */
}

/* Recepte saraksts - bez punktiem */
ul {
  list-style: none;
  padding: 0;
}

/* Vienas receptes saraksta ieraksta stils */
li {
  background-color: #555;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between; /* Atstarpe starp info un pogām */
  align-items: center;
}

/* Recepšu informācijas konteiners */
.recipe-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Recepšu nosaukumi - izceļas ar krāsu un izcelšanu */
.recipe-name {
  font-size: 18px;
  cursor: pointer;
  color: #00bfff;
  text-decoration: underline;
}

/* Recepšu nosaukuma hover efekts */
.recipe-name:hover {
  color: #0077cc;
}

/* Papildus informācija par recepti */
.recipe-meta {
  font-size: 14px;
  color: #aaa;
  font-style: italic;
}

/* Dzēšanas poga */
.delete-button {
  background-color: #dc3545;
  color: white;
  padding: 8px 15px;
  font-size: 14px;
  margin: 0;
}

/* Dzēšanas pogas hover efekts */
.delete-button:hover:not(:disabled) {
  background-color: #c82333;
}

/* Dzēšanas poga, ja tā atspējota */
.delete-button:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Recepte detaļu bloks */
.recipe-meta-info {
  background-color: #555;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* Paragrāfu atstarpes receptes detaļās */
.recipe-meta-info p {
  margin: 5px 0;
}

/* Recepšu saturs - sastāvdaļas un norādījumi */
.recipe-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Sastāvdaļu un norādījumu sadaļas */
.ingredients-section,
.instructions-section {
  background-color: #555;
  padding: 15px;
  border-radius: 8px;
}

/* Sadaļu virsrakstu stils */
.ingredients-section h3,
.instructions-section h3 {
  color: #007bff;
  margin-top: 0;
  margin-bottom: 10px;
}

/* Responsīvais dizains mazākiem ekrāniem */
@media (max-width: 768px) {
  nav {
    flex-direction: column;     /* Navigācija vienā kolonnā */
    align-items: stretch;       /* Stiepjas pa visu platumu */
  }
  
  .nav-left ul {
    flex-wrap: wrap;            /* Navigācijas pogas var iet vairākās rindās */
    justify-content: center;    /* Centrējam */
  }
  
  .nav-right {
    justify-content: center;    /* Centrējam labās puses elementus */
  }
  
  li {
    flex-direction: column;     /* Receptes ieraksts stāvus */
    align-items: flex-start;    /* Izlīdzināšana pa kreisi */
    gap: 10px;                  /* Atstarpe starp rindām */
  }
  
  .delete-button {
    align-self: flex-end;       /* Dzēšanas poga pie labā malas */
  }
}