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

  --background-color: #fff;
  --accent-colour: #b7643b;
  --accent-colour-hover: #954a2e;
  --accent-colour-2: #3bb54a;
  --tag-colour: #e5e5e5;

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

  /* Offset “card” shadow (forms, bank UI) */
  --form-shadow-colour: var(--accent-colour);
  --control-height: 2.75rem;
}

:root.dark-mode {
  /* Navy / mist / terracotta — aligned with login dark theme */
  /* Primary UI text matches border mist so labels/links stay visible on navy */
  --text-dark: #cdd4da;
  /* Light-colored text on accent buttons (red/green) */
  --text-light: #fbf2f2;
  --text-muted: #8fa3b8;

  --background-color: #071739;
  --surface-elevated: #0c2349;
  --surface-input: #cdd4da;
  --surface-input-text: #071739;

  --accent-colour: #b7643b;
  --accent-colour-hover: #c97a52;
  --accent-colour-2: #3bb54a;
  --tag-colour: rgba(205, 212, 218, 0.22);

  --border: 3px solid #cdd4da;
  --table-header-bg: #0c2349;
  --table-border: #4a6288;

  --form-shadow-colour: #b7643b;
}

:root.dark-mode html {
  background-color: var(--background-color);
}

:root.dark-mode .button {
  --background-color: #cdd4da;
  --background-color-hover: #bac5cd;
  background-color: var(--background-color);
  color: #071739;
}

/* Outline FAB-style links: mist text + border on navy (same hue as --border) */
:root.dark-mode .button.button--add,
:root.dark-mode .button.button--addElevator,
:root.dark-mode a.button.button--add,
:root.dark-mode a.button.button--addElevator {
  background-color: transparent;
  color: #cdd4da;
}

:root.dark-mode .button.button--add:hover,
:root.dark-mode .button.button--addElevator:hover,
:root.dark-mode a.button.button--add:hover,
:root.dark-mode a.button.button--addElevator:hover {
  background-color: var(--accent-colour);
  color: var(--text-light);
}

:root.dark-mode .form__field {
  --background-color: #cdd4da;
  color: #071739;
  border-bottom-color: #071739;
}

:root.dark-mode .button--form {
  background: #cdd4da;
  color: #071739;
}

:root.dark-mode .button--form:hover {
  background: #bac5cd;
}

:root.dark-mode .sidebar {
  background-color: var(--surface-elevated);
}

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

:root.dark-mode .container {
  box-shadow:
    0 4px 24px rgba(7, 23, 57, 0.55),
    0.75rem 0.75rem 0 -0.2rem rgba(183, 100, 59, 0.45);
}

:root.dark-mode .dropdown-content {
  box-shadow: 0 8px 20px rgba(7, 23, 57, 0.5), 0 0 0 1px rgba(205, 212, 218, 0.2);
}

:root.dark-mode select,
:root.dark-mode .filter-form input {
  border-color: var(--table-border);
  background-color: var(--surface-input);
  color: var(--surface-input-text);
}

:root.dark-mode .pagination a {
  color: #cdd4da;
  border-color: rgba(205, 212, 218, 0.45);
}

:root.dark-mode .pagination a:hover {
  color: #cdd4da;
  background-color: rgba(205, 212, 218, 0.1);
  border-color: #cdd4da;
}

:root.dark-mode .ip-section {
  border-color: var(--table-border);
}

:root.dark-mode .summary-item {
  border-color: var(--table-border);
}

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

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

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select {
  min-height: var(--control-height);
  line-height: 1.2;
}

.form__field,
.nav__link {
  --border: 3px solid var(--accent-colour);
}

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);
}

/* Theme control: always visible below header (footer was easy to miss) */
.sidebar-toolbar {
  flex-shrink: 0;
  border-bottom: var(--border);
  padding: 0.25rem 0;
}

.sidebar-toolbar__theme {
  font-weight: 600;
}

/* 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);
}

/* 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;
  }
  
  .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: inline-flex;
  align-items: center;
  justify-content: center;

  /* 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 */
  min-height: var(--control-height);
}

/* 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(--surface-elevated);
  color: var(--text-dark);
  border: 1px solid rgba(205, 212, 218, 0.35);
  box-shadow: 0 4px 14px rgba(7, 23, 57, 0.45), 0 0 0 1px rgba(183, 100, 59, 0.25);
}

/* 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;
}

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

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

.container 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;
}