﻿body {
   font-family: 'Helvetica Neue', Arial, sans-serif;
}




/* Basis menu styling */
#nav {
   background-color: #f9f9f9; /* lichte achtergrond, net als even dagen */
   border: 1px solid #ccc;
   font-family: Arial, sans-serif;
}

   #nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex; /* horizontaal */
   }

      #nav ul li {
         margin: 0;
         padding: 0;
      }

         #nav ul li a, #nav ul li .aspNetDisabled {
            display: block;
            padding: 10px 20px;
            text-decoration: none;
            color: #333; /* standaard tekstkleur */
            border-right: 1px solid #ccc;
         }

         /* Laatste item geen border */
         #nav ul li:last-child a {
            border-right: none;
         }

         /* Hover effect */
         #nav ul li a:hover {
            background-color: #eee; /* weekend kleur */
            color: #000;
         }

         /* Actieve link stijl (Home bijvoorbeeld) */
         #nav ul li a.active {
            background-color: #fdd; /* feestdag roodachtig */
            font-weight: bold;
            color: #900;
         }

         /* LinkButton styling (ASP.NET) */
         #nav ul li .aspNetDisabled,
         #nav ul li .LinkButtonStyle {
            display: block;
            padding: 10px 20px;
            cursor: pointer;
            color: #333;
         }

            #nav ul li .LinkButtonStyle:hover {
               background-color: #eee;
               color: #000;
            }

/* Responsive tip: smalle schermen stapelen */
/*@media (max-width: 600px) {
   #nav ul {
      flex-direction: column;
   }

      #nav ul li a, #nav ul li .LinkButtonStyle {
         border-right: none;
         border-bottom: 1px solid #ccc;
      }
}*/


h1 {
   color: #DA7454;
   font-size: 24px;
   margin-top: 5px;
   margin-bottom: 5px;
}

h2 {
   color: #DA7454;
   font-size: 16px;
}

h3 {
   color: #DA7454;
   font-size: 16px;
   margin-bottom: 0;
}

/* ALGEMEEN */
.uren-table,
.uren-totaal {
   font-family: Arial, sans-serif;
   color: #A96463;
}
.margin5
{
   margin:5px 5px 5px 5px;
}
   /* HEADER */
   .uren-table thead th {
      background-color: #A96463 !important;
      color: #ffffff !important;
      border-color: #A96463;
      
   }

/*    RIJEN 
   .uren-table tbody tr:nth-child(odd) td {
      background-color: #F9D1A9 !important;
   }

   .uren-table tbody tr:nth-child(even) td {
      background-color: #FCE9D7 !important;
   }
*/

/* Zebra per DAG (logisch correct) */
.uren-table tbody tr.even > td {
   background-color: #FCE9D7;
}

.uren-table tbody tr.odd > td {
   background-color: #F9D1A9;
}


   /* TEKST */
   .uren-table td,
   .uren-table th,
   .uren-totaal td,
   .uren-totaal th {
      color: #A96463 !important;
      vertical-align: middle;
   }

   /* TOTAAL TABEL */
   .uren-totaal th {
      background-color: #F9D1A9;
      font-weight: 600;
   }

   .uren-totaal td {
      background-color: #FCE9D7;
   }

/* ALIGNMENT */
.text-end {
   text-align: right;
}


/* Zebra pattern alleen op hoofd-rij */
tr.day-row.even,
tr.day-row.odd {
   background-color: inherit;
}

/* Opmerking-rij krijgt GEEN eigen zebra */
tr.day-row-detail {
   background-color: inherit !important;
}

   /* Optioneel: subtiele styling voor opmerking */
   /*tr.day-row-detail td {
      font-style: italic;
      padding-top: 0.25rem;
      padding-bottom: 0.5rem;
      border-top: none;
   }*/

    Detailrij gebruikt kleur van hoofd-rij 
   tr.day-row-detail > td {
      background-color: inherit;
      font-style: italic;
      padding-top: 0.25rem;
      padding-bottom: 0.5rem;
      border-top: none;
   }

/* Scrollbare container */
.table-responsive {
   max-height: 90vh; /* pas aan naar wens */
   overflow-y: auto;
}

/* Sticky header */
.uren-table thead th {
   position: sticky;
   top: 0;
   z-index: 10; /* blijft boven rows */
   background-color: #f9f9f9; /* zelfde als tabel */
   border-bottom: 2px solid #ccc;
}



/* Print: sticky uitschakelen */
@media print {
   .uren-table thead th {
      position: static !important;
      top: auto !important;
      z-index: auto !important;
   }
}
/* Extra: weekend / feestdag header blijft netjes */
.uren-table thead th {
   box-shadow: 0 2px 2px -1px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
   .uren-table thead tr th {
      font-size: 0.8rem;
      padding: 4px;
      line-height: 30px;
   }

   .uren-table tbody tr td {
      line-height: 40px;
   }

   }


.btn-block {
   width: 100%;
   display: block;
}