body {
background-color: #F7F7F7;
font-family: 'Arial', sans-serif;
}

header {
background-color: lightgreen;
padding: 20px;
text-align: center;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0px 0px 10px #BBB;
margin-top: 30px !important;
position: fixed;
top: 0px;
left: 5%;
z-index: 9999;
}

header h1, header h2 {
margin: 0;
}

header button {
padding: 10px 20px;
font-size: 1.2em;
border-radius: 10px;
background-color: lightgray;
border: none;
cursor: pointer;
margin-top: 10px;
}

header #appearing {
display: flex;
align-items: center;
}

header #messageSave {
margin: 0 10px;
font-size: 1.2em;
}

header, .container {
width: 88%;
margin: auto;
}

.container {
display: flex;
padding: 40px;
justify-content: center;
}

.left {
width: 40%;
padding-right: 20px;
position: fixed;
top: 150px;
left: 5%;
}

.block {
padding: 20px;
background-color: #E0E0E0;
margin-bottom: 20px;
box-shadow: 0px 0px 10px #BBB;
border-radius: 5px;
}

.block h3 {
font-size: 1.5em;
font-weight: bold;
margin: 0;
}

.block button, #add_period {
background-color: lightgreen;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 1.2em;
font-weight: bold;
cursor: pointer;
}

#table_header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
border-spacing: 2px;
border: 1px solid grey;
font-variant: normal;
position: fixed;
left: 46.5%;
right: 6.25%;
z-index: 1000;
background-color: #c7bfbf;
}

#time_add {
display: flex;
justify-content: space-evenly;
width: 100%;
}

#time_delete_button {
position: absolute;
left: 95%;
top: 10%;
}

#table_header p {
margin: auto;
text-align: center;
font-size: 1.5em;
font-weight: bold;
}

#add_period {
margin-right: 10px;
position: absolute;
right: 0;
top: 20px;
}

.block .header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}

li {
list-style-type: none;
}

#priorities {
margin-top: 10px;
}

#priorities input {
display: none;
}

.right {
width: 60%;
padding-left: 20px;
margin-left: 45%;
margin-top: 100px;
position: relative;
}

table:not(.fc-scrollgrid):not(.fc-col-header):not(.fc-scrollgrid-sync-table) {
border-collapse: collapse;
width: 100%;
font-size: 18px;
margin-top: 120px;
}

tr:nth-child(even) {
background-color: #f2f2f2;
}

tr {
height: 80px;
}

#table_header {
height: 100px;
}

th,
td {
border: 1px solid #BBB;
padding: 20px;
text-align: center;
}

th {
background-color: #E0E0E0;
font-weight: bold;
}

#time td:first-child {
width: 20%;
font-weight: bold;
}

#time_overlay {
position: absolute;
/*top: 120px;
height: 78px;
background-color: #ff000075;
*/
width: 90%;
left: 6%;
justify-content: center;
display: flex;
align-items: center;
border: 2px solid red;
border-radius: 10px;
box-shadow: 0px 0px 10px #bbb;
}

/**calendar**/
.calendar-container {
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
width: 100%;
box-sizing: border-box;
}

#calendar {
width: 90%;
height: 90%;
background-color: lightgray;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
max-width: 100%;
box-sizing: border-box;
}

.calendar-header {
background-color: lightgreen;
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
border-radius: 10px 10px 0 0;
}

.calendar-header h2 {
margin: 0;
font-size: 1.5rem;
font-weight: bold;
flex: 1;
text-align: center;
}

.nav-btn {
background-color: lightgray !important;
border: none !important;
border-radius: 5px !important;
font-size: 1.5rem !important;
width: 40px !important;
height: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
font-weight: bold !important;
}

.nav-btn:hover {
background-color: #bbb !important;
}

.header-buttons {
display: flex;
gap: 10px;
align-items: center;
}

.today-btn, .logout-btn, .kanban-btn {
background-color: lightgray !important;
border: none !important;
border-radius: 5px !important;
padding: 8px 16px !important;
cursor: pointer !important;
font-weight: bold !important;
}

.today-btn:hover, .logout-btn:hover, .kanban-btn:hover {
background-color: #bbb !important;
}

.kanban-btn {
background-color: #007bff !important;
color: white !important;
}

.kanban-btn:hover {
background-color: #0056b3 !important;
}

.logout-btn {
background-color: #dc3545 !important;
color: white !important;
}

.logout-btn:hover {
background-color: #c82333 !important;
}

.calendar-grid {
padding: 20px;
background-color: white;
border-radius: 0 0 10px 10px;
}

.weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
margin-bottom: 10px;
}

.weekday {
background-color: #E0E0E0;
font-weight: bold;
text-align: center;
padding: 12px 8px;
border: 1px solid #BBB;
}

.days-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
}

.day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-weight: bold;
border: 1px solid #BBB;
min-height: 60px;
transition: all 0.2s ease;
}

.day.empty {
cursor: default;
border: none;
}

.day.has-data {
background-color: lightgreen;
color: black;
}

.day.no-data {
background-color: #C0C0C0;
color: black;
}

.day.today {
border: 3px solid yellow !important;
font-weight: bold;
}

.day.today.has-data {
background-color: lightgreen;
}

.day.today.no-data {
background-color: orange;
color: black;
}

.day:hover:not(.empty) {
background-color: #f0f0f0;
transform: scale(1.02);
}

.day.has-data:hover {
background-color: #90EE90;
}

.day.no-data:hover {
background-color: #A0A0A0;
}

/* Responsive design */
@media (max-width: 768px) {
.calendar-header {
flex-direction: column;
gap: 15px;
}

.calendar-header h2 {
order: -1;
}

.header-buttons {
order: 1;
}

.nav-btn {
width: 35px !important;
height: 35px !important;
font-size: 1.2rem !important;
}

.day {
min-height: 50px;
font-size: 14px;
}

.weekday {
padding: 8px 4px;
font-size: 14px;
}
}

/**pie chart**/
#pie_chart_overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
}

#pie_chart_container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 5px;
}

#pie_chart_canvas {
width: 1200px;
height: 800px;
}

#close_pie_chart_button {
margin-top: 20px;
width: 100%;
}

/* Logout button positioning */
.logout-button {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}

.logout-button:hover {
  background-color: #c82333;
}

/* Theme toggle container positioning */
.theme-toggle-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-title {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}