@font-face {
    font-family: 'Lato';
    src: url(/fonts/Lato-Regular.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url(/fonts/Lato-Bold.ttf) format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url(/fonts/Lato-Italic.ttf) format('truetype');
    font-weight: normal;
    font-style: italic;
}

:root {
  /* Color Palette */
  --blue-500: #0d6efd;
  --blue-600: #0b5ed7;
  --green-500: #198754;
  --red-500: #dc3545;
  --red-600: #bb2d3b;
  --yellow-500: #ffc107;
  
  /* Grey Palette */
  --grey-100: #f8f9fa;
  --grey-150: #f1f3f5;
  --grey-200: #e9ecef;
  --grey-300: #dee2e6;
  --grey-400: #ced4da;
  --grey-500: #adb5bd;
  --grey-600: #6c757d;
  --grey-700: #495057;
  --grey-800: #343a40;
  --grey-900: #212529;
  --grey-1000: #0f1113;

  /* Additional Colors */
  --white: #ffffff;
  --black: #000000;
  --red-100: #f8d7da;
  --red-200: #f5c6cb;
  --red-300: #d93025;
  --grey-50: #f2f2f2;
  --grey-450: #ccc;
  --grey-550: #4d4d4d;

  /* Base Styles */
  --text-color: var(--grey-800);
  --link-color: var(--blue-500);
  --link-hover-color: var(--blue-600);
  --page-background: var(--grey-100);
  --component-background: var(--white);
  
  /* Fonts */
  --font-family-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-family-mono: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-sm: 0.875rem;
  --line-height-base: 1.5;

  /* Sizing & Spacing */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem;  /* 8px */
  --spacing-3: 1rem;   /* 16px */
  --spacing-4: 1.5rem; /* 24px */
  --spacing-5: 2rem;   /* 32px */

  /* Borders & Shadows */
  --border-width: 1px;
  --border-color: var(--grey-300);
  --border-radius: 0.25rem;
  --box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --focus-shadow-grey: 0 0 0 2px rgba(108, 117, 125, 0.25);
}

/* 1. Global Resets & Defaults */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--text-color);
  background-color: var(--page-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 2. Global Typography */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: var(--spacing-2);
  font-weight: 500;
  line-height: 1.2;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
p {
  margin-top: 0;
  margin-bottom: var(--spacing-3);
}

a {
  color: var(--link-color);
  text-decoration: underline;
}

a:hover {
  color: var(--link-hover-color);
}

code {
  font-family: var(--font-family-mono);
}

/* 3. Global Form Element Styles */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--grey-700) !important;
  box-shadow: var(--focus-shadow-grey) !important;
}

/* Overriding the global focus for grey theme where needed */
.grey-focus:focus {
    border-color: var(--grey-700) !important;
    box-shadow: var(--focus-shadow-grey) !important;
}

/* === common.css === */
/* A library of reusable component styles for the Food Sherpa application. */

.page-content {
    font-family: var(--font-family-sans);
}

/* 1. Page Layout & Structure */
.page-container {
    padding: var(--spacing-4);
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.page-title {
    font-size: 2rem;
    color: var(--grey-900);
    text-align: left;
    margin-bottom: 0;
}

/* 2. Data Table Styles */
.page-header-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--white);
    margin-bottom: 24px;
}

.page-header-table  .page-title {
    width: 100%;
    font-size: 1.75rem;
    line-height: 1.875rem;
    font-weight: 500;
    text-align: left; 
    padding: 0px;
}

.page-header-table  .page-header-add-button {
    width: 100%; 
    font-size: 15px; 
    font-weight: 500;
    text-align: left;
    padding: 0px;
}

/* 2. Data Table Styles */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--white);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.data-table th,
.data-table td {
    border-right: 1px solid var(--grey-300);
    border-left: 1px solid var(--grey-300);
    padding: 12px 15px;
    text-align: left;
    vertical-align: middle; /* Center content vertically */
}

.data-table th {
    border: 1px solid var(--grey-300);
    background-color: var(--grey-100);
    font-weight: bold;
    color: var(--grey-900);
    cursor: pointer;
}

.data-table th:hover {
    background-color: var(--grey-200);
}

.data-table tr {
    border: 1px solid var(--grey-300);
}

.data-table tbody tr:nth-child(even) {
    background-color: var(--grey-50);
}

.data-table tbody tr:hover {
    background-color: var(--grey-200);
}

/* 3. Button Styles */

.btn {
    display: inline-flex; /* Changed to inline-flex for icon alignment */
    align-items: center; /* Vertically align icon and text */
    justify-content: center; /* Horizontally center icon and text */
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-base);
    font-weight: 500;
    text-align: center;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    border: var(--border-width) solid transparent;
    white-space: nowrap;
    text-decoration: none; /* Ensure links styled as buttons don't have underlines */
}

.btn-secondary {
    background-color: var(--grey-700); /* Mid Grey */
    color: var(--white);
    padding: 10px 15px;
    font-size: 1.05em;
    border: none;
}
.btn-secondary:hover {
    background-color: var(--grey-1000); /* Black */
    color: white; /* Keep text white on hover */
}

.btn-edit {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    padding: 5px;
    color: var(--grey-900);
    margin-right: 1rem;
}

.btn-edit:hover {
    color: var(--grey-550);
}

.btn-delete {
    background-color: var(--red-500);
    color: var(--white);
    padding: 6px 8px; /* Reduced padding to make button smaller */
}

.btn-delete:hover {
    background-color: var(--red-600);
}

.btn-submit {
    background-color: var(--grey-1000); /* Dark Grey for primary action */
    color: var(--white);
    padding: 10px 15px;
    font-size: 1.05em;
    border: none;
}

.btn-submit:hover {
    background-color: var(--grey-800); /* Slightly darker grey for hover */
}
  
.btn-submit:disabled {
    background-color: var(--grey-500); /* Lighter grey when disabled */
    color: var(--grey-200); /* Lighter text color for disabled state */
    cursor: not-allowed;
    opacity: 0.65; /* Adjusted opacity */
}

.link-style {
    display: inline-flex; /* Changed to inline-flex for icon alignment */
    align-items: center; /* Vertically align icon and text */
    justify-content: center; /* Horizontally center icon and text */
    font-size: var(--font-size-base);
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    background: none;
    color: var(--grey-700);
    border: none;
    padding: 0px;
    text-decoration: underline;
    margin-top: 32px;
}

.link-style:hover {
    color: var(--grey-1000);
}

.name-column {
    min-width: 6rem;
    max-width: 8rem;
}

.first-name-column {
    min-width: 8rem;
    max-width: 12rem;
}

.last-name-column {
    min-width: 8rem;
    max-width: 12rem;
}

.email-column {
    width: 100%;
}

.role-column {
    min-width: 10rem;
}

.description-column {
    min-width: 10rem;
    width: 100%;
}

.allergen-column {
    min-width: 8rem;
    width: 50%;
}

.irvs-column {
    min-width: 12rem;
    width: 50%;
}

/* Column for action buttons in a table */
.actions-column {
    /*display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    text-align: center;*/
    min-width: 7.75rem;
}

/* 4. Form Layout Styles */
.form-container {
    max-width: 700px;
    margin: 0 auto;
    padding: var(--spacing-4);
    background-color: var(--component-background);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.form-container .page-title {
    text-align: center;
    transform: none;
    margin-bottom: var(--spacing-4);
}

.form-group {
    text-align: left;
    margin-bottom: var(--spacing-3);
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-base); /* Standardize label font size */
}

.form-group input,
.form-group textarea,
.form-group select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 38px;
    line-height: 1.5;
    box-sizing: border-box;
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-base);
    font-family: var(--font-family-sans); /* Ensure all form fields use the correct font */
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 16px;
}

.form-group select {
    width: 100%;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27currentColor%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpolyline points=%276,9 12,15 18,9%27%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    padding-right: 32px;
}

/* Disabled state styling */
.form-group select:disabled,
.form-group input[type="text"]:disabled,
.form-group input[type="number"]:disabled {
    background-color: var(--grey-100);
    color: var(--grey-600);
    cursor: not-allowed;
}

/* Focus state */
.form-group select:focus,
.form-group input[type="text"]:focus,
.form-group input[type="number"]:focus {
    outline: none;
    border-color: var(--grey-700);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
} 

.form-group-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-group-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--grey-450);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    top: -2px;
}

.form-group-checkbox input[type="checkbox"]:checked {
    background-color: var(--grey-600);
    border-color: var(--grey-600);
}

.form-group-checkbox input[type="checkbox"]:checked::before {
    content: '✔';
    font-size: 14px;
    color: var(--white);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.form-group-checkbox input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.4);
}

.form-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-3);
} 

.error-message {
    color: var(--red-300); /* Red color for errors */
    background-color: var(--red-100);
    border: 1px solid var(--red-200);
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 14px;
    text-align: center;
  }
  
  .button-group {
    display: flex;
    flex-direction: column; /* Stack buttons vertically initially */
    gap: 24px; /* Space between buttons */
    margin-top: 20px;
  }
  
  .login-page-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* Ensure it takes full viewport height */
    width: 100%;
    padding: 20px; /* Add some padding for smaller screens */
    background-color: var(--grey-150);
    box-sizing: border-box;
  }
  
  .login-form-container {
    background-color: var(--white); /* White background for the form card */
    padding: 30px 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Soft shadow */
    width: 100%;
    max-width: 420px; /* Max width for the form card */
    text-align: center;
  }

.login-title {
    font-weight: bold;
}

.login-bottom-gap {
    margin-bottom: 1.5rem;
}
  
.wrapper{
  background: var(--grey-100);
  width: 100%;
  height: 100%;
}

.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100vw; /* Ensure app container takes full width */
  max-width: 1320px; /* Changed from 1290px */
  margin-left: auto; /* Added for centering */
  margin-right: auto; /* Added for centering */
  background-color: var(--white);
}

.main-app-header {
  display: flex;
  justify-content: space-between; /* Pushes logo to left, actions to right */
  align-items: center;
  padding: 12px 24px;
  background-color: var(--grey-100);
  border-bottom: 1px solid var(--grey-300);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.logo-text {
  font-size: 1.8em; /* Larger font for the logo */
  font-weight: bold;
  color: var(--grey-800);
  text-decoration: none; /* In case it's wrapped in a link later */
}

.logo-link {
  text-decoration: none; /* Remove underline from link */
  color: inherit; /* Inherit color from parent, which should be similar to logo-text */
}

.header-actions {
  position: relative; /* Needed for absolute positioning of the dropdown menu */
  display: flex;
  align-items: center;
  gap: 15px;
}

.dropdown-trigger-button {
  background: none;
  border: none;
  padding: 8px; /* Add some padding to make it easier to click */
  cursor: pointer;
  font-size: 1.4em; /* Adjust icon size */
  color: var(--grey-800);
  border-radius: 50%; /* Make it circular if desired */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease-in-out;
}

.dropdown-trigger-button:hover {
  background-color: rgba(0, 0, 0, 0.05); /* Subtle hover effect */
}

/* Styling for the new arrow icon */
.arrow-icon {
  margin-left: 4px; /* Space between user icon and arrow (was 8px) */
  margin-top: 2px; /* Move arrow slightly lower */
  font-size: 0.525em; /* Make arrow slightly smaller than user icon (was 0.7em) */
  transition: transform 0.3s ease-in-out; /* Smooth rotation */
}

.arrow-icon.arrow-up {
  transform: rotate(-180deg); /* Rotate arrow up when dropdown is open */
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px); /* Position below the trigger, with a small gap */
  right: 0;
  background-color: var(--white);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--grey-200);
  min-width: 220px; /* Minimum width for the dropdown */
  z-index: 1000; /* Ensure it's above other content */
  padding: 8px 0; /* Padding for top/bottom of the menu */
  list-style: none; /* If using ul */
  margin: 0;
}

.dropdown-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  font-size: 0.95em;
  color: var(--grey-900);
  gap: 10px; /* Space between icon and text */
  text-decoration: none;
  white-space: nowrap;
}

.dropdown-user-info {
  /* Specific styles if needed, for now inherits .dropdown-item */
  font-weight: 500; /* Slightly bolder for user info */
  color: var(--grey-700);
}

.dropdown-user-info i {
  color: var(--grey-600); /* Icon color for address card */
}

.dropdown-item-button {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  /* Inherits .dropdown-item styles for flex, padding, font, color, gap */
}

.dropdown-item-button:hover {
  background-color: var(--grey-100); /* Light hover for menu items */
}

.dropdown-item-button i {
  color: var(--grey-600); /* Default icon color for button items */
  width: 1.2em; /* Ensure icons align well if they have different widths */
  text-align: center;
}

.dropdown-category-content {
  background: var(--gre-50);
  border-top: 1px solid var(--grey-400);
  margin-left: 8px;
}

/* Added styles for page-content */
.page-content {
  width: 100%; /* Ensures it uses the space within .main-content */
  text-align: center; /* Centers the inline content (text) of its children */
  padding: 32px 8px; /* Add some vertical and horizontal padding */
}

/* The windown in which the content of other pages is shown. */
.main-content {
  width: 100%; /* Ensures it uses the space within .main-content */
  text-align: center; /* Centers the inline content (text) of its children */
  padding: 1rem; /* Add some vertical and horizontal padding */
}