:root {
  /*Para uso do meu toast*/
  --error: #ef4444;
  --success: #22c55e;
  --warning: #f59e0b;

  /* Textos */
  --primary-color: var(--primary);
  --primary-color-contrast: #ffffff;

  --text-thowine-black-light: #1e293b;
  --text-thowine-light: #6b7280;
  --text-thowine-light-btn: 000000;
  --text-thowine-light-white: #fff;

  /* Botoes */
  --btn-secundary-color: #f3f4f6;
  --btn-secundary-text-color: #403434;
  --btn-danger: #ef4444;
  --item-required: #ef4444;

  /* Bordas */
  --border-light-mode: #e2e8f0;
  --border-sidebar: #e9e9e9;
  --focus-light-mode: #fff;

  /* para uso do hover*/
  --hover-light-mode: #f8f8f;
  --card-light-header: #fff;

  /*Backgroud light mode*/
  --background-main: #f3f4f6;
  --background-color-main-light: #fff;
  --backgroud-container-child: #fff;
  --background-input: #f3f4f6;

  /*Toggle light mode*/
  --toggle-ligth-mode: #cccccc;
}

html.dark-theme {
  --background-main-dark-mode: #2a2a2a;
  --background-dark-mode-menu-lateral: #1a1a1a;

  --hover-dark-mode: #1a1a1a;
  --toggle-dark-mode: #1a1a1a;
  --text-thowine-dark: #9ca3af;

  --border-dark-mode: #444444;

  --sidebar-l1-bg-dark: var(--surface-dark-mode);
  --sidebar-l1-hover-bg-dark: var(--surface-hover-dark-mode);
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow-x: hidden;
  background-color: var(--background-main);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main-content {
  margin-top: var(--header-height);
  margin-left: var(--sidebar-l1-width);
  padding: 20px;
  height: calc(100vh - var(--header-height));
  transition: margin-left 0.3s ease;
  overflow: auto;
  background-color: transparent;
}

html.dark-theme body {
  background-color: var(--background-main-dark-mode);
  color: var(--text-thowine-dark);
}

html.dark-theme .header-left .logo,
html.dark-theme .user-name {
  color: var(--text);
}

html.dark-theme .user-role {
  color: var(--text-light);
}

html {
  scrollbar-color: var(--border) var(--surface-hover);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--surface-hover);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background-color: var(--border);
  border-radius: 10px;
  border: 2px solid var(--surface-hover);
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-lighter);
}

.theme-toggle-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  margin: 0;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--text-light);
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.theme-toggle-button:hover,
.theme-toggle-button:focus {
  color: var(--text);
  background-color: var(--surface-hover);
}

.theme-toggle-button .theme-icon-sun {
  display: none;
}
.theme-toggle-button .theme-icon-moon {
  display: block;
}

html.dark-theme .theme-toggle-button .theme-icon-sun {
  display: block;
  color: var(--warning);
}

html.dark-theme .theme-toggle-button .theme-icon-moon {
  display: none;
}

html.dark-theme .main-header .theme-toggle-button {
  color: var(--text-light);
}

html.dark-theme .main-header .theme-toggle-button:hover,
html.dark-theme .main-header .theme-toggle-button:focus {
  color: var(--text);
  background-color: var(--surface-hover);
}

body.font-small {
  font-size: 87.5%;
}

body.font-medium {
  font-size: 100%;
}

body.font-large {
  font-size: 112.5%;
}

#logoutModal .modal-body {
  padding: 40px;
  text-align: center;
  min-height: 100px;
}

#logoutModal .modal-body p {
  font-size: 1rem;
  color: var(--text);
  margin: 0;
}

#logoutModal .modal-footer {
  gap: 10px;
}

#logoutModal .btn-text,
#logoutModal .btn-primary-spa {
  padding: 8px 20px;
  font-size: 0.9rem;
  min-width: 100px;
  height: auto;
}

#logoutModal .btn-text {
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#logoutModal .btn-primary-spa {
  background-color: var(--btn-primary-spa);
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

html.dark-theme #logoutModal .modal-body p {
  color: var(--text);
}

#logoutModal .modal-header {
  background-color: var(--btn-primary-spa);
}

#logoutModal .modal-header h3 {
  color: #ffffff;
}

html.dark-theme #logoutModal .modal-header {
  background-color: #2563eb;
  border-bottom-color: #1d4ed8;
}