:root {
  --text-dark: #000;
  --text-light: #fbf2f2;
  --text-muted: #595959;

  --background-color: #fff;
  --accent-colour: #f56565;
  --accent-colour-2: #3bb54a;
  --tag-colour: #e5e5e5;

  --border: 3px solid #000;
  --table-header-bg: #f2f2f2;
  --table-border: #ddd;
}

:root.dark-mode {
  --text-dark: #fbf2f2;
  --text-light: #000;
  --text-muted: #595959;

  --background-color: #1c2023;
  --accent-colour: #f56565;
  --accent-colour-2: #3bb54a;
  --tag-colour: var(--accent-colour-2);

  --border: 3px solid #fff;
  --table-header-bg: #2d2d2d;
  --table-border: #444;
}

.button {
  --background-color: #e2e8f0;
  --background-color-hover: #bdd1eb;
}

.form__field {
  --background-color: #e8e5e5;
}

.form__field,
.nav__link {
  --border: 3px solid #f56565;
}

html {
  /* Sets global font size on small devices */
  font-size: 12px;
}

/* როცა ეკრანს ვაფართოვებთ 960px-მდე, შრიფტის ზომა გავზარდოთ 14px-ით. */
@media screen and (min-width: 60em) {
  html {
    font-size: 14px;
  }
}

/* როცა ვადიდებთ მაქსიმალურად 1200px, მაშინ 18px-ით */
@media screen and (min-width: 75em) {
  html {
    font-size: 18px;
  }
}

body {
  /* Setting display flex, and a column flex direcion means we can force the footer
         to the bottom of the page, by allowing the main element to grow to fill the window */
  display: flex;
  flex-direction: column;

  /* Sets the shared font characteristics, so that that they can be inherited globally */
  font-family: "Public Sans", sans-serif;
  color: var(--text-dark);
  line-height: 1.45;
  background-color: var(--background-color);
}

.header {
  width: 100%;
  /* Ensure the header takes the full width of the page */
  padding: 0 2rem;
  border-bottom: var(--border);
  background-color: var(--background-color);
  /* Ensure background color is applied */
}

.header__logo {
  display: flex;
  align-items: center;
  height: 4rem;
  color: inherit;
  text-decoration: none;
}

.logo__icon {
  width: 2.5rem;
  height: 2.5rem;
}

.logo__name {
  margin-left: 0.5rem;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 20px;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* max-width: 80rem;  */
  margin: 0 auto;
  /* padding: 0 1rem; */
}

.nav {
  display: flex;
}

.nav__link {
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  text-decoration: none;
  color: inherit;
  border: none;
  background: none;
}

.nav__link:hover {
  margin-bottom: -3px;
  border-bottom: var(--border);
  color: var(--accent-colour);
}

.nav__link:hover .nav__icon {
  fill: var(--accent-colour);
  /* Change icon color to red on hover */
}

.nav__item {
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: none;
  background: none;
}

/* Sets the size of the icon (light/dark theme toggle) to be the same as the font size
      So that it takes up more or less the same amount of space as the links */
.nav__icon {
  width: 1em;
  height: 1em;
}

/* ========================================
   SIDEBAR STYLES (Outlook-style)
   ======================================== */

/* Sidebar Container */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: var(--sidebar-width, 280px);
  background-color: var(--background-color);
  border-right: var(--border);
  display: flex;
  flex-direction: column;
  transition: width 0.3s ease, transform 0.3s ease;
  z-index: 1000;
}

.sidebar.collapsed {
  width: 60px;
}

.sidebar.collapsed .sidebar-text {
  display: none;
}

.sidebar.collapsed .logo-text {
  display: none;
}

.sidebar.collapsed .dropdown-arrow {
  display: none;
}

/* Sidebar Header */
.sidebar-header {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-bottom: var(--border);
  min-height: 70px;
}

.sidebar-toggle {
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
}

.sidebar-toggle:hover {
  background-color: var(--tag-colour);
}

.sidebar-toggle svg {
  width: 20px;
  height: 20px;
  fill: var(--text-dark);
}

.sidebar-logo {
  margin-left: 1rem;
  flex: 1;
}

.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.logo-icon {
  width: 2rem;
  height: 2rem;
}

.logo-text {
  margin-left: 0.5rem;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--text-dark);
}

/* Sidebar Navigation */
.sidebar-nav {
  flex: 1;
  padding: 1rem 0;
  overflow-y: auto;
}

.sidebar-link {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: var(--text-dark);
  transition: background-color 0.2s ease, color 0.2s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.sidebar-link:hover {
  background-color: var(--tag-colour);
  color: var(--accent-colour);
}

.sidebar-link--active {
  background-color: var(--accent-colour);
  color: white;
  border-left: 4px solid var(--accent-colour-2);
}

.sidebar-link--active:hover {
  background-color: var(--accent-colour);
  color: white;
}

.sidebar-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  fill: currentColor;
  margin-right: 0.75rem;
}

.sidebar-text {
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
}

/* Sidebar Dropdown */
.sidebar-dropdown {
  position: relative;
}

.dropdown-toggle {
  justify-content: space-between;
}

.dropdown-arrow {
  width: 16px;
  height: 16px;
  fill: currentColor;
  transition: transform 0.2s ease;
  margin-left: auto;
}

.sidebar-dropdown.open .dropdown-arrow {
  transform: rotate(90deg);
}

.sidebar-dropdown-content {
  display: none;
  background-color: var(--tag-colour);
  border-left: 2px solid var(--accent-colour);
  margin-left: 1rem;
}

.sidebar-dropdown.open .sidebar-dropdown-content {
  display: block;
}

.sidebar-dropdown-link {
  display: block;
  padding: 0.5rem 1rem;
  padding-left: 2.5rem;
  text-decoration: none;
  color: var(--text-dark);
  font-size: 13px;
  transition: background-color 0.2s ease;
}

.sidebar-dropdown-link:hover {
  background-color: var(--background-color);
  color: var(--accent-colour);
}

/* Sidebar Footer */
.sidebar-footer {
  border-top: var(--border);
  padding: 1rem 0;
}

/* Resize Handle */
.sidebar-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  background-color: transparent;
  cursor: col-resize;
  transition: background-color 0.2s ease;
}

.sidebar-resize-handle:hover {
  background-color: var(--accent-colour);
}

/* Mobile Toggle Button */
.sidebar-mobile-toggle {
  display: none;
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1001;
  background: var(--accent-colour);
  border: none;
  border-radius: 4px;
  padding: 0.5rem;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
}

.sidebar-mobile-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background-color: white;
  margin: 2px 0;
  transition: 0.3s;
}

/* Sidebar Overlay */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
}

.sidebar-overlay.active {
  display: block;
}

/* Main Content Adjustment */
body {
  --sidebar-width: 280px;
}

.sidebar.collapsed ~ .main {
  margin-left: 60px;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
  .sidebar-mobile-toggle {
    display: flex;
  }
  
  .sidebar {
    transform: translateX(-100%);
  }
  
  .sidebar.mobile-open {
    transform: translateX(0);
  }
  
  .main {
    margin-left: 0 !important;
  }
  
  .sidebar.collapsed ~ .main {
    margin-left: 0;
  }
}

/* დაგენერირებულია აქედან -------------------------------------------- */
.nav-toggle {
    display: none;
}

.nav-toggle-label {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    position: absolute;
    right: 2rem; /* Position the label to the right */
    top: 1rem; /* Adjust the top position as needed */
}

.nav-menu {
  display: flex;
}

@media screen and (max-width: 60em) {
  .nav-toggle-label {
      display: block;
  }

  .nav-menu {
      display: none;
      flex-direction: column;
      width: 100%;
      background-color: var(--background-color);
      position: absolute;
      top: 100%;
      left: 0;
      border-top: var(--border);
  }

  .nav-toggle:checked + .nav-toggle-label + .nav__dropdown .nav_dropdown-content {
      display: flex;
  }

  .nav__link {
      padding: 1rem;
      border-bottom: var(--border);
  }

  .nav__link:last-child {
      border-bottom: none;
  }
}

.nav__dropdown {
  position: relative;
}

.nav_dropdown-content {
  display: none;
  flex-direction: column;
  width: 100%;
  background-color: var(--background-color);
  position: absolute;
  top: 100%;
  left: 0;
  border-top: var(--border);
  z-index: 1000;
}

.nav_dropdown-content.show {
  display: flex;
}

@media screen and (max-width: 60em) {
  .nav-menu {
      display: none;
  }

  .nav__dropdown .nav_dropdown-content {
      display: flex;
  }
}

.nav__content {
  display: none;
}

.nav-toggle:checked + .nav-toggle-label + .nav__content {
  display: block;
}

.nav__dropdown .nav_dropdown-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--background-color);
  position: absolute;
  top: 100%;
  left: -15rem;
  border-top: var(--border);
  z-index: 1000;
}



@media screen and (max-width: 60em) {
  .nav-menu {
    display: none;
  }

  .nav__dropdown .nav_dropdown-content {
    display: flex;
  }
}

@media screen and (max-width: 60em) {
  .nav-menu {
    display: none;
  }

  .nav__dropdown .nav_dropdown-content {
    display: flex;
  }
}

@media screen and (max-width: 60em) {
  .nav__link {
    display: inline-block;
    padding: 1rem;
    margin: 0.5rem 0;
    text-align: center;
    background-color: var(--accent-colour);
    color: var(--text-light);
    border:none;
    border-radius: 4px;
    text-decoration: none;
    width: 15rem;
  }

  .nav__link:hover {
    background-color: var(--accent-colour-2);
    color: var(--text-light);
  }
}

/* აქამდე -------------------------------------------------------------*/

/* Setting flex-grow makes the main content grow as much as possible to fill the body.
      This pushes the footer to the bottom of the page, where the page would otherwise
      be smaller than the viewport height. */
.main {
  flex-grow: 1;
  padding: 3rem 1.5rem 2rem 1.5rem;
  margin-left: var(--sidebar-width);
  transition: margin-left 0.3s ease;
}

/* The following media query increase the distance of the main content from the header
     as the window size increases. */
@media screen and (min-width: 30em) {
  .main {
    padding-top: 5rem;
  }
}

.footer {
  padding: 1rem 0;
  color: var(--text-muted);
  text-align: center;
  font-size: 15px;
}

/* Button styles that we'll share across our site */
.button {
  /* In order to easily position our buttons, we're making them block level elements */
  display: block;

  /* Removes any outlines added when the button is in focus */
  outline: none;

  /* Setting the cursor to pointer indicates to a user that the button is a clickable element */
  cursor: pointer;

  /* Again, with buttons we have to be explicit about inheriting font properties */
  font-size: inherit;
  font-family: inherit;

  /* Slows the background colour change effect when we hover over the button, making
         it take 0.1s with an accelerating colour change */
  transition: background 0.1s ease-in;
  width: 100%;
  /* Ensure all buttons are the same width */
}

/* Utility class to use on links within text */
.link {
  text-decoration: none;
  color: var(--accent-colour);
  white-space: nowrap;
}

.link:hover {
  text-decoration: underline;
}

.user-info {
  position: fixed;
  bottom: 10px;
  left: 10px;
  background-color: var(--background-color);
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  color: var(--text-dark);
  font-size: 14px;
  z-index: 1000;
  /* Ensure it appears above other elements */
}

/* Dark mode adjustments */
:root.dark-mode .user-info {
  background-color: var(--text-dark);
  color: var(--text-light);
}

/* Styles for lift management page */
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: var(--background-color);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

form {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

select,
button {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  max-width: 300px;
}

button {
  background-color: #007bff;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 100%;
  /* Ensure all buttons are the same width */
}

button:hover {
  background-color: #0056b3;
}

.ip-section {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.ip-section h3 {
  margin-bottom: 10px;
}

.ip-section form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ip-section form button {
  flex: 1 1 100%;
  /* Default to full width */
}

@media screen and (min-width: 600px) {
  .ip-section form button {
    flex: 1;
    /* Distribute buttons evenly */
  }
}

/* operator_log filter */
.filter-form {
  display: flex;
  align-items: flex-end; /* Align items to the bottom */
  gap: 10px;
}

.filter-form .form-group {
  display: flex;
  flex-direction: column;
}

.filter-form label {
  margin-bottom: 5px;
}

.filter-form input,
.filter-form button {
  height: 40px; /* Set a consistent height for inputs and button */
  padding: 0 10px; /* Adjust padding for better alignment */
  box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
}

.filter-form button {
  margin-top: 0; /* Remove top margin to align with inputs */
  width: auto; /* Ensure button width is auto */
}

/* Styles for table */
.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.table th, .table td {
  border: 1px solid var(--table-border);
  padding: 8px;
  text-align: left;
}

.table th {
  background-color: var(--table-header-bg);
  font-weight: bold;
}

.table tr:nth-child(even) {
  background-color: transparent;
}

.pagination {
  display: flex;
  justify-content: center; /* Center the pagination controls */
  align-items: center;
  margin-top: 20px;
}

.pagination a {
  margin: 0 5px;
  text-decoration: none;
  color: #007bff;
}

.pagination a:hover {
  text-decoration: underline;
}

.pagination span {
  margin: 0 10px;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--background-color);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: var(--text-dark);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: var(--accent-colour);
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: var(--accent-colour-2);
}

.filter-form-horizontal {
    display: flex;
    align-items: center;
    gap: 10px; /* Adjust the gap between elements as needed */
}

.filter-form-horizontal div {
    display: flex;
    flex-direction: column;
}

.filter-form-horizontal label {
    margin-bottom: 5px;
}

.filter-form-horizontal input,
.filter-form-horizontal select,
.filter-form-horizontal button {
    height: 40px;
    padding: 0 10px;
    box-sizing: border-box;
}

.form-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.form-row {
    margin-bottom: 10px;
}

.form-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

button {
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
}

button:hover {
    background-color: #0056b3;
}