/**
 * Lu-OS - Componentes Windows XP
 * Biblioteca completa de componentes UI estilo Windows XP Luna Blue
 * Versão: v.0.0.wip.0
 * Data: 2025-12-09
 */

/* ========================================
   BOTÕES XP
   ======================================== */

.xp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 3px 16px;
  min-height: 23px;
  font-family: var(--xp-font-family);
  font-size: var(--xp-font-size);
  font-weight: var(--xp-font-weight-normal);
  color: var(--xp-text-black);
  background: var(--xp-button-gradient);
  border: 1px solid var(--xp-blue-border);
  border-radius: 3px;
  cursor: pointer;
  box-shadow: var(--xp-inset-shadow);
  transition: all 0.1s ease;
  -webkit-user-select: none;
  user-select: none;
}

.xp-button:hover {
  background: var(--xp-button-hover-gradient);
  border-color: var(--xp-blue-highlight);
}

.xp-button:active {
  background: var(--xp-button-active-gradient);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3);
  transform: translateY(1px);
}

.xp-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--xp-gray-light);
  color: var(--xp-gray-dark);
}

/* Botão Primário */
.xp-button-primary {
  background: linear-gradient(to bottom, #5A9DFF 0%, #2559AD 100%);
  color: var(--xp-text-white);
  font-weight: var(--xp-font-weight-bold);
  border-color: var(--xp-blue-dark);
}

.xp-button-primary:hover {
  background: linear-gradient(to bottom, #6AADFF 0%, #3569BD 100%);
}

/* Botão de Ícone */
.xp-button-icon {
  min-width: 23px;
  padding: 3px 5px;
}

.xp-button-icon img {
  width: 16px;
  height: 16px;
}

/* ========================================
   JANELAS XP
   ======================================== */

.xp-window {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 400px;
  min-height: 300px;
  background: var(--xp-gray-light);
  border: 2px solid var(--xp-gray-border);
  border-radius: 8px 8px 0 0;
  box-shadow: var(--xp-shadow);
  overflow: hidden;
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
}

.xp-window.active {
  z-index: calc(var(--z-windows) + 100);
  border-color: var(--xp-blue-border);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.xp-window.inactive .xp-titlebar {
  background: var(--xp-title-inactive);
  box-shadow: none;
  border-color: var(--xp-gray-border);
}

.xp-window.inactive {
  border-color: var(--xp-gray-border);
  box-shadow: var(--xp-shadow);
}

/* Barra de Título */
.xp-titlebar {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 5px;
  background: var(--xp-title-gradient);
  border-radius: 8px 8px 0 0;
  cursor: move;
  -webkit-user-select: none;
  user-select: none;
}

.xp-titlebar-icon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}

.xp-titlebar-text {
  flex: 1;
  font-family: var(--xp-font-family);
  font-size: var(--xp-font-size-title);
  font-weight: var(--xp-font-weight-bold);
  color: var(--xp-text-white);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Botões da Barra de Título */
.xp-titlebar-buttons {
  display: flex;
  gap: 2px;
}

.xp-titlebar-buttons button {
  width: 21px;
  height: 21px;
  border: none;
  background-color: transparent;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  padding: 0;
  transition: filter 0.1s ease;
}

.xp-titlebar-buttons button:hover {
  filter: brightness(1.1);
}

.xp-titlebar-buttons button:active {
  filter: brightness(0.9);
}

.xp-btn-minimize {
  background-image: url('/assets/images/icons/Minimize.png');
}

.xp-btn-maximize {
  background-image: url('/assets/images/icons/Maximize.png');
}

.xp-btn-restore {
  background-image: url('/assets/images/icons/Restore.png');
}

.xp-btn-close {
  background-image: url('/assets/images/icons/Exit.png');
}

/* Conteúdo da Janela */
.xp-window-content {
  flex: 1;
  overflow: auto;
  background: var(--xp-white);
  padding: 8px;
}

.xp-window-content.no-padding {
  padding: 0;
}

/* Barra de Status */
.xp-statusbar {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  background: var(--xp-gray-light);
  border-top: 1px solid var(--xp-gray-dark);
  font-size: var(--xp-font-size-small);
  color: var(--xp-text-black);
}

.xp-statusbar-item {
  padding: 0 8px;
  border-right: 1px solid var(--xp-gray-dark);
}

.xp-statusbar-item:last-child {
  border-right: none;
  margin-left: auto;
}

/* Resize Handles */
.xp-window-resize {
  position: absolute;
  background: transparent;
}

.xp-window-resize.n {
  top: 0;
  left: 8px;
  right: 8px;
  height: 4px;
  cursor: ns-resize;
}

.xp-window-resize.s {
  bottom: 0;
  left: 8px;
  right: 8px;
  height: 4px;
  cursor: ns-resize;
}

.xp-window-resize.e {
  top: 8px;
  right: 0;
  bottom: 8px;
  width: 4px;
  cursor: ew-resize;
}

.xp-window-resize.w {
  top: 8px;
  left: 0;
  bottom: 8px;
  width: 4px;
  cursor: ew-resize;
}

.xp-window-resize.ne {
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  cursor: nesw-resize;
}

.xp-window-resize.nw {
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  cursor: nwse-resize;
}

.xp-window-resize.se {
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  cursor: nwse-resize;
}

.xp-window-resize.sw {
  bottom: 0;
  left: 0;
  width: 8px;
  height: 8px;
  cursor: nesw-resize;
}

/* ========================================
   INPUTS XP
   ======================================== */

.xp-input,
.xp-textarea,
.xp-select {
  padding: 3px 5px;
  font-family: var(--xp-font-family);
  font-size: var(--xp-font-size);
  color: var(--xp-text-black);
  background: var(--xp-input-bg);
  border: 1px solid var(--xp-input-border);
  border-radius: 0;
  outline: none;
}

.xp-input:focus,
.xp-textarea:focus,
.xp-select:focus {
  border-color: var(--xp-input-focus-border);
  box-shadow: 0 0 2px var(--xp-input-focus-border);
}

.xp-input:disabled,
.xp-textarea:disabled,
.xp-select:disabled {
  background: var(--xp-gray-light);
  color: var(--xp-gray-dark);
  cursor: not-allowed;
}

.xp-textarea {
  resize: vertical;
  min-height: 60px;
}

/* ========================================
   CHECKBOX E RADIO XP
   ======================================== */

.xp-checkbox,
.xp-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.xp-checkbox input[type="checkbox"],
.xp-radio input[type="radio"] {
  width: 13px;
  height: 13px;
  margin: 0;
  cursor: pointer;
}

.xp-checkbox label,
.xp-radio label {
  cursor: pointer;
  font-size: var(--xp-font-size);
}

/* ========================================
   MENU XP
   ======================================== */

.xp-menu {
  background: var(--xp-gray-light);
  border: 1px solid var(--xp-gray-border);
  box-shadow: var(--xp-shadow);
  padding: 2px;
  min-width: 150px;
}

.xp-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 20px 4px 8px;
  font-size: var(--xp-font-size);
  color: var(--xp-text-black);
  cursor: pointer;
  transition: background 0.05s ease;
}

.xp-menu-item:hover {
  background: var(--xp-blue-highlight);
  color: var(--xp-text-white);
}

.xp-menu-item.disabled {
  color: var(--xp-gray-dark);
  cursor: not-allowed;
}

.xp-menu-item.disabled:hover {
  background: transparent;
  color: var(--xp-gray-dark);
}

.xp-menu-separator {
  height: 1px;
  margin: 3px 2px;
  background: var(--xp-gray-dark);
}

.xp-menu-icon {
  width: 16px;
  height: 16px;
}

.xp-menu-shortcut {
  margin-left: auto;
  font-size: var(--xp-font-size-small);
  color: inherit;
}

/* ========================================
   BARRA DE MENU (Arquivo, Editar, etc)
   ======================================== */

.xp-menubar {
  display: flex;
  background: var(--xp-gray-light);
  border-bottom: 1px solid var(--xp-gray-dark);
  padding: 2px 4px;
}

.xp-menubar-item {
  padding: 4px 10px;
  font-size: var(--xp-font-size);
  cursor: pointer;
  transition: background 0.05s ease;
}

.xp-menubar-item:hover {
  background: var(--xp-blue-highlight);
  color: var(--xp-text-white);
}

.xp-menubar-item.active {
  background: var(--xp-blue-highlight);
  color: var(--xp-text-white);
}

/* ========================================
   BARRA DE FERRAMENTAS (Toolbar)
   ======================================== */

.xp-toolbar {
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--xp-gray-light);
  border-bottom: 1px solid var(--xp-gray-dark);
}

.xp-toolbar-separator {
  width: 1px;
  margin: 0 4px;
  background: var(--xp-gray-dark);
}

.xp-toolbar-button {
  padding: 4px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 0.05s ease;
}

.xp-toolbar-button:hover {
  background: var(--xp-button-hover-gradient);
  border-color: var(--xp-blue-highlight);
}

.xp-toolbar-button:active,
.xp-toolbar-button.active {
  background: var(--xp-button-active-gradient);
  border-color: var(--xp-blue-border);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.xp-toolbar-button img {
  width: 20px;
  height: 20px;
  display: block;
}

/* ========================================
   DIÁLOGOS E MODAIS XP
   ======================================== */

.xp-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
}

.xp-dialog {
  min-width: 300px;
  max-width: 600px;
  background: var(--xp-gray-light);
  border: 2px solid var(--xp-gray-border);
  border-radius: 8px 8px 0 0;
  box-shadow: var(--xp-shadow-heavy);
  overflow: hidden;
}

.xp-dialog-title {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  background: var(--xp-title-gradient);
  color: var(--xp-text-white);
  font-weight: var(--xp-font-weight-bold);
  font-size: var(--xp-font-size-title);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}

.xp-dialog-content {
  padding: 16px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.xp-dialog-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.xp-dialog-message {
  flex: 1;
  font-size: var(--xp-font-size);
  line-height: 1.4;
}

.xp-dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--xp-gray-dark);
}

/* ========================================
   PROGRESS BAR XP
   ======================================== */

.xp-progress {
  width: 100%;
  height: 22px;
  background: var(--xp-white);
  border: 1px solid var(--xp-gray-darker);
  overflow: hidden;
}

.xp-progress-bar {
  height: 100%;
  background: linear-gradient(
    to right,
    #0054E3 0%,
    #3C89D6 50%,
    #0054E3 100%
  );
  background-size: 200% 100%;
  animation: xp-progress-animate 1s linear infinite;
  transition: width 0.3s ease;
}

@keyframes xp-progress-animate {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 200% 0%;
  }
}

/* Progress Bar sem animação */
.xp-progress-bar.static {
  animation: none;
  background: linear-gradient(to right, #0054E3 0%, #3C89D6 100%);
}

/* ========================================
   TABS XP
   ======================================== */

.xp-tabs {
  display: flex;
  border-bottom: 1px solid var(--xp-gray-dark);
  background: var(--xp-gray-light);
}

.xp-tab {
  padding: 6px 16px;
  border: 1px solid transparent;
  border-bottom: none;
  background: var(--xp-gray);
  cursor: pointer;
  font-size: var(--xp-font-size);
  transition: background 0.05s ease;
}

.xp-tab:hover {
  background: var(--xp-gray-light);
}

.xp-tab.active {
  background: var(--xp-white);
  border-color: var(--xp-gray-dark);
  border-bottom-color: var(--xp-white);
  position: relative;
  z-index: 1;
}

.xp-tab-content {
  padding: 16px;
  background: var(--xp-white);
}

/* ========================================
   LISTA/LISTBOX XP
   ======================================== */

.xp-listbox {
  background: var(--xp-white);
  border: 1px solid var(--xp-gray-darker);
  overflow-y: auto;
  max-height: 300px;
}

.xp-listbox-item {
  padding: 4px 8px;
  cursor: pointer;
  transition: background 0.05s ease;
}

.xp-listbox-item:hover {
  background: var(--xp-blue-highlight);
  color: var(--xp-text-white);
}

.xp-listbox-item.selected {
  background: var(--xp-blue);
  color: var(--xp-text-white);
}

/* ========================================
   TREE VIEW XP
   ======================================== */

.xp-treeview {
  background: var(--xp-white);
  border: 1px solid var(--xp-gray-darker);
  overflow-y: auto;
  padding: 4px;
}

.xp-treeview-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  cursor: pointer;
  transition: background 0.05s ease;
}

.xp-treeview-item:hover {
  background: var(--xp-blue-highlight);
  color: var(--xp-text-white);
}

.xp-treeview-toggle {
  width: 9px;
  height: 9px;
  border: 1px solid var(--xp-gray-darker);
  background: var(--xp-white);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.xp-treeview-toggle::before {
  content: '+';
  position: absolute;
  top: -2px;
  left: 1px;
  font-size: 10px;
  font-weight: bold;
}

.xp-treeview-toggle.expanded::before {
  content: '−';
}

.xp-treeview-children {
  padding-left: 20px;
}

/* ========================================
   TOOLTIP XP
   ======================================== */

.xp-tooltip {
  position: absolute;
  background: #FFFFE1;
  border: 1px solid var(--xp-black);
  padding: 4px 6px;
  font-size: var(--xp-font-size-small);
  color: var(--xp-black);
  box-shadow: var(--xp-shadow-light);
  pointer-events: none;
  z-index: calc(var(--z-modal) + 100);
  white-space: nowrap;
}

/* ========================================
   CONTEXT MENU (Menu de Contexto)
   ======================================== */

.xp-context-menu {
  position: absolute;
  background: var(--xp-gray-light);
  border: 1px solid var(--xp-gray-border);
  box-shadow: var(--xp-shadow);
  padding: 2px;
  min-width: 180px;
  z-index: var(--z-modal);
}

/* ========================================
   PANEL/GROUPBOX XP
   ======================================== */

.xp-panel {
  padding: 12px;
  background: var(--xp-white);
  border: 1px solid var(--xp-gray-darker);
}

.xp-groupbox {
  padding: 16px 12px 12px 12px;
  border: 1px solid var(--xp-gray-dark);
  position: relative;
  margin-top: 8px;
}

.xp-groupbox-title {
  position: absolute;
  top: -8px;
  left: 10px;
  padding: 0 4px;
  background: var(--xp-gray-light);
  font-size: var(--xp-font-size);
  color: var(--xp-text-black);
}

/* ========================================
   FIM DOS COMPONENTES
   ======================================== */