/* pepa */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;

 }

 body {
     background-color: #a98a66;
 }

 .vikend {
     background-color: #e0e0e0;
 }

 .heading_create {
     font-size: 1.5em;
     color: white;
     text-align: center;
 }

 .margin-top-1 {
     margin-top: 1em;
 }


 .login {
     display: flex;
     flex-direction: column;
     min-height: 100vh;
     background-color: #a98a66;
     overflow: hidden;
 }

 .login-top {
     display: flex;
     flex: 3;
     justify-content: center;
     align-items: center;
     width: 100%;
 }

 .login-top img {
     max-width: 80%;
     height: auto;
 }

 .login-bottom {
     flex: 1;
     background-color: white;
     border-radius: 2em 2em 0 0;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     padding-bottom: 2em;
 }

 .login-heading {
     flex: 1;
     padding-top: 2em;
     color: #a98a66;
 }

 .login-form {
     flex: 2;
     display: flex;
     flex-direction: column;
     gap: 1em;
     width: 70%;
     max-width: 400px;
 }

 .input-container {
     position: relative;
     width: 100%;
 }

 .login-input {
     height: 3em;
     background-color: rgb(235, 235, 235);
     border-radius: 1em;
     border: solid 1px grey;
     padding-left: 3em;
     width: 100%;
 }

 .input-icon {
     position: absolute;
     left: 1em;
     top: 50%;
     transform: translateY(-50%);
     color: grey;
 }

 .login-btn {
     height: 3em;
     border-radius: 1em;
     border: solid 1px grey;
     color: white;
     font-size: 1em;
     background-color: #a98a66;
     cursor: pointer;
 }


 .profile {
     display: flex;
     flex-direction: column;
     padding-bottom: 6em;
 }

 .profile_header {
     height: 15vh;
     background-color: white;
     border-radius: 0 0 2em 2em;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .profile_people_title {

     color: white;
 }

 .profile_title {
     font-size: 2em;
     font-weight: 600;
     color: black;
     margin-left: 1em;
 }

 .profile_description {
     font-size: 1.2em;
     color: gray;
     margin-left: 2em;
 }

 .profile_edit {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
 }

 .profile_edit_item {
     background-color: white;
     border-radius: 1em;
     padding: 1em;
     margin: 1em;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     color: black;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
 }

 .profile_edit_item h3 {
     margin-top: 0.5em;
     font-size: 0.8em;
     font-weight: 500;
 }

 .profile_edit_item i {
     font-size: 2em;
     color: #a98a66;
 }

 .profile_edit_item:hover {
     background-color: #f0f0f0;
 }

 .profile_people {
     padding: 0 2vw;
     display: flex;
     flex-direction: column;

 }

 .profile_item {
     display: flex;
     gap: 1em;
     /* mezera mezi prvky */
     align-items: center;
     background-color: white;
     padding: 1em;
     border-radius: 1em;
     margin-top: 1em;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     color: #a98a66;
     /* justify-content: space-between;  -- odeber nebo zakomentuj */
 }

 /* 1. a 2. prvek – každý flex-grow: 3 */
 .profile_item>*:nth-child(1),
 .profile_item>*:nth-child(2) {
     flex: 3;
 }

 /* 3. prvek – flex-grow: 1 */
 .profile_item>*:nth-child(3) {
     flex: 1;
 }


 .btn_profile {
     background-color: #a98a66;
     color: white;
     border: none;
     border-radius: 0.5em;
     padding: 0.5em 1em;
     cursor: pointer;
     font-size: 0.8em;
 }

 .profile_edit_link {
     text-decoration: none;
     color: inherit;
 }


 .profile_checkbox {
     width: 2em;
     height: 2em;
     margin-left: 10px;
     accent-color: #a98a66;
 }

 .profile_calendar {
     display: flex;
     align-items: center;
     margin-top: 20px;
     justify-content: center;
 }



 .profile_button {
     font-size: 16px;
     background-color: white;
     color: #a98a66;
     border: none;
     padding: 1.5em 2em;
     border-radius: 1em;
 }

 .profile_datepicker {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     padding: 1.5em 2em;
     font-size: 16px;
     border: 1px solid #ccc;
     border-radius: 1em;
     margin: 0 10px;
     /* pokud chceš vlastní šipku, můžeš sem dát background-image */
     background-color: white;
     cursor: pointer;
 }

 /* 2) Schováme vestavěnou šipku/spinner ve WebKitu (Chrome, Edge, Android…) */
 .profile_datepicker::-webkit-inner-spin-button,
 .profile_datepicker::-webkit-clear-button,
 .profile_datepicker::-webkit-calendar-picker-indicator {
     display: none;
     -webkit-appearance: none;
 }

 /* 3) A pro Mozilla-based (Firefox) */
 .profile_datepicker::-moz-inner-spin-button,
 .profile_datepicker::-moz-clear-button {
     display: none;
 }



 .create_person {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 20px;

     margin-top: 7em;
 }

 .input-vytvorit {
     width: 95%;
     height: 3em;
     border-radius: 1em;
     margin: 1em;
     border: 1px solid grey;
     padding-left: 1em;
 }

 /* chci prosím vytvořit aby ten text v tom inputu posunuté taky o 1 em  ten tex co se napíše do toho formuláře*/

 .white-chack {
     accent white;
 }



 .grid-person {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 80%;
     margin: 1em auto;
 }








 /* Základní wrapper, aby inline-block fungoval správně */
 .checkbox-wrapper {
     display: inline-block;
     position: relative;
     vertical-align: middle;
 }

 /* Skrytí originálního checkboxu */
 .checkbox-wrapper input[type="checkbox"] {
     position: absolute;
     opacity: 0;
     width: 0;
     height: 0;
     margin: 0;
     padding: 0;
 }

 /* Vlastní „čtvereček“ */
 .fake-checkbox {
     display: inline-block;
     width: 24px;
     height: 24px;
     border: 1px solid #555;
     border-radius: 4px;
     line-height: 24px;
     text-align: center;
     font-weight: bold;
     font-family: sans-serif;
     user-select: none;
     margin-left: 8px;
 }

 /* Po zaškrtnutí bude pozadí barevné a text bílý */
 .checkbox-wrapper input[type="checkbox"]:checked+.fake-checkbox {
     background-color: #a98a66;
     border: 1px solid #a98a66;
     color: white;
 }

 .vyuctovani_nastaveni {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     margin: 1em;
     gap: 1em;
 }


 .vyuctovani_tlacikto {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     width: 100%;
     max-width: 600px;
     padding: 20px;
     background-color: white;
     color: #a98a66;
     border-radius: 1em;
     padding: 3em 0;
 }

 .vyuctovani_stavy {
     font-size: 1em;
     font-weight: bold;
     color: #a98a66;
     margin-top: 1em;
 }

 .pocatecni_text {
     font-size: 1.2em;
     font-weight: bold;
 }

 .vypis_produktu {
     display: flex;
     flex-direction: column;
     gap: 1em;
     padding: 0 1em;
 }


 .stavy_item {
     display: flex;
     gap: 1em;
     align-items: center;
     background-color: white;
     padding: 1em;
     border-radius: 1em;
     margin-top: 1em;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     color: #a98a66;
     text-align: center;
 }

 /* 1. a 5. prvek – flex-grow: 1 */
 .stavy_item>*:nth-child(1),
 .stavy_item>*:nth-child(5) {
     flex: 1;
 }

 /* 2. a 4. prvek – flex-grow: 2 */
 .stavy_item>*:nth-child(2),
 .stavy_item>*:nth-child(4) {
     flex: 2;
 }

 /* 3. prvek – flex-grow: 3 */
 .stavy_item>*:nth-child(3) {
     flex: 3;

 }

 .btn_neplatí {
     background-color: #f44336;
     color: white;
     border: none;
     padding: 0.5em 1em;
     border-radius: 0.5em;
     cursor: pointer;
 }

 .btn_plati {
     background-color: green;
     color: white;
     border: none;
     padding: 0.5em 1em;
     border-radius: 0.5em;
     cursor: pointer;
 }

 .pocatecni_aktualni {
     color: rgb(55, 249, 97);
 }

 .btn_skontrolovano {
     background-color: #a98a66;
     color: white;
 }

 /* Modal overlay a obsah */
 #modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.5);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1000;
 }

 #modal {
     background: #a98a66;
     padding: 1.5em;
     border-radius: 0.5em;
     max-width: 90%;
     width: 300px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
     text-align: center;
 }

 #modal h3 {
     margin-top: 0;
     color: white;
 }

 #modal-input {
     width: 100%;
     font-size: 1.2em;
     padding: 0.5em;
     margin: 1em 0;
 }

 #modal-input_name {
     width: 100%;
     font-size: 1.2em;
     padding: 0.5em;
 }

 .modal-actions {
     display: flex;
     justify-content: space-between;
 }

 .modal-actions button {
     flex: 1;
     margin: 0 0.25em;
     padding: 0.5em;
     border: none;
     border-radius: 0.3em;
     cursor: pointer;
 }

 #modal-cancel {
     background: #ccc;
 }

 #modal-confirm {
     background: white;
     color: #a98a66;
 }

 /* Skryjeme modal, když má třídu .hidden */
 .hidden {
     display: none !important;
 }

 .btn_dokoncit {
     background-color: white;
     color: #a98a66;
     border: none;
     padding: 0.5em 1em;
     border-radius: 0.5em;
     cursor: pointer;
     margin: 1em 0;
     font-size: 1em;
     font-weight: bold;
     text-align: center;
 }




 .smeny_tabulka {
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0 2vw;
 }



 .smeny_table {
     width: 100%;
     border-collapse: collapse;
     margin-top: 1em;
     background-color: white;

 }

 th,
 td {
     border: 1px solid #a98a66;
     padding: 8px;
     text-align: center;
     color: #a98a66;
 }

 th {
     color: #a98a66;
     background-color: white;
 }

 /* chci tam kde bude moje jméno označít tu buňku prosím že se vymění barvy color a bg color */
 .delam {
     background-color: #a98a66;
     color: white;
 }

 .smeny-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: white;
     color: #a98a66;
     padding: 1em;
     border-radius: 1em;
     margin: 2em;
     border: none;
     cursor: pointer;
     font-size: 1.2em;
 }

 .smeny-btn i {
     font-size: 1.5em;
     margin: 0 0.5em;

 }

 .smeny-mesic {
     font-size: 1.5em;
     color: white;
     margin: 0 1em;
     text-align: center;
 }

 .smeny_ovladani {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 2em;
     padding: 0 5vw;
 }

 .btn_edit {
     padding: 0.5em 1em;
     border-radius: 0.5em;
     cursor: pointer;
     background-color: #a98a66;
     color: white;
     border: 0;
 }