body {
    font-family: Arial, sans-serif;
    font-size: large;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    /* Centers horizontally */
    align-items: flex-start;
    /* Fix: 'top' is invalid, use 'flex-start' */
    background: url("images/foody_bg2.png") no-repeat center center fixed;
    background-size: cover;

    #page-container {
        min-height: 100%;
        display: flex;
        flex-direction: column;
    }
}

.view {
    flex: 1;
    background: rgba(255, 255, 255, 0.7); /* Slightly more visible */
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* More depth */
    width: 90%;
    max-width: 800px;
    text-align: center;
    backdrop-filter: blur(5px); /* Adds a glass effect */
}

.view input {
    font-size: 16px;
    width: 100%; /* Ensures it stretches properly */
    max-width: 400px; /* Prevents it from becoming too wide */
    text-align: center;
    padding: 8px;
    margin: 8px 0;
    border: 1px solid #bbb;
    border-radius: 6px;
    outline: none; /* Removes default focus outline */
    transition: border 0.3s ease-in-out;
}

.view input:focus {
    border-color: #007bff; /* Highlight when selected */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}


.buttons {
    font-size: large;
    display: flex;
    justify-content: center;
    /* Centers buttons horizontally */
    gap: 10px;
    /* Adds space between buttons */
}

.buttons button {
    flex: 1;
    max-width: 150px;
    padding: 10px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: white;
    background: #007bff;
    transition: background 0.3s ease-in-out;
}

.buttons button:hover {
    background: #0056b3;
}


#food-list {
    list-style-type: none;
    padding: 0;
    width: 100%;
    max-width: 600px;
    /* Adjust width as needed */
    margin: 0 auto;
    /* Centers the entire list */
}

.food-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid #ddd;
    width: 95%; /* Slightly wider for better spacing */
    max-width: 600px; /* Ensures it doesn't stretch too much */
    margin: 8px auto;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}


.food-column {
    flex: 1;
    /* Makes each column take equal space */
    text-align: left;
    padding: 5px;
}

.food-column.name {
    text-align: left;
}

.food-column.restaurant {
    font-weight: bold;
    text-align: left;
}

.food-column.liked {
    text-align: center;
}

.food-column.rating {
    text-align: right;
    font-weight: bold;
}

.large-checkbox {
    transform: scale(1.5);
    /* Makes checkbox larger */
    margin-left: 5px;
}

.large-select {
    font-size: large;
    padding: 5px;
}


.toastify {
    position: fixed !important; /* Forces to stay fixed in place */
    top: 20px !important; /* Adjust if needed */
    left: 50% !important; /* Centers horizontally */
    transform: translateX(-50%) !important; /* Ensures true centering */
    z-index: 9999 !important; /* Keeps toasts above everything */
    width: auto !important; /* Prevents stretching */
    min-width: 250px;
    max-width: 400px; /* Adjust based on preference */
    text-align: center;
}

/* The Modal (hidden by default) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
  }
  
  /* Modal Content/Box */
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    max-width: 600px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    position: relative;
  }
  
  /* The Close Button */
  .close {
    position: absolute;
    top: 0;
    right: 0;
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    padding: 5px 10px;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

  .food-column.actions {
    text-align: right;
}

.food-column.actions button {
    padding: 5px 10px;
    margin: 5px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    font-size: 0.8em;
    transition: background-color 0.3s ease;
}

.food-column.actions button:hover {
    background-color: #0056b3;
}

/* Specific button styles (optional) */
.edit-btn { background-color: #28a745; }
.edit-btn:hover { background-color: #1e7e34; }
.delete-btn { background-color: #dc3545; }
.delete-btn:hover { background-color: #c82333; }
.notes-btn { background-color: #ffc107; color: black; } /* Yellowish color for notes */
.notes-btn:hover { background-color: #e0a800; }

#tiborg-footer {
    background: rgba(15, 15, 15, 0.9);
    color: #e0e0e0;
    padding: 16px 12px;
    text-align: center;
    font-size: 0.9rem;
    border-top: 1px solid #444;
    margin-top: 40px;
    width: 100%;
}

.tiborg-footer-content p {
    margin: 4px 0;
}

.tiborg-footer-links a {
    color: #58a6ff;
    text-decoration: none;
    margin: 0 8px;
    transition: color 0.2s ease-in-out;
}

.tiborg-footer-links a:hover {
    color: #79c0ff;
}

.tiborg-footer-note {
    font-size: 0.75rem;
    color: #aaa;
}