/*
 * Controles do Windows XP (tema Luna azul) feitos com os bitmaps originais
 * cortados por scripts/build-xp-ui.py. Margens de corte (border-image) e
 * cores vêm do NORMALBLUE.ini do luna.msstyles.
 * Fonte padrão dos diálogos: MS Shell Dlg 8 = Tahoma 8pt (11px).
 */
.xpui {
  font: 11px Tahoma, 'Segoe UI', sans-serif;
  color: #000;
  background: #ece9d8;
  cursor: default;
  user-select: none;
}
.xpui *,
.xpui *:before,
.xpui *:after {
  box-sizing: border-box;
}

/* posição em unidades de diálogo (DLU): Tahoma 8 = 6x13 → x1.5, y1.625 */
.xpui-dlg {
  position: relative;
}
.xpui-at {
  position: absolute;
  white-space: nowrap;
}

/* ------------------------------------------------------------ botão */
.xpui-btn {
  font: inherit;
  color: #000;
  padding: 0 4px;
  min-height: 21px;
  border-style: solid;
  border-width: 9px 8px;
  border-image: url(/xp-ui/button-0.png) 9 8 9 8 fill stretch;
  background: transparent;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 1;
}
.xpui-btn > span {
  margin: -9px -4px;
}
.xpui-btn.is-default,
.xpui-btn:focus-visible {
  border-image-source: url(/xp-ui/button-4.png);
}
.xpui-btn:hover:not(:disabled) {
  border-image-source: url(/xp-ui/button-1.png);
}
.xpui-btn:active:not(:disabled),
.xpui-btn.is-pressed {
  border-image-source: url(/xp-ui/button-2.png);
}
.xpui-btn:disabled {
  border-image-source: url(/xp-ui/button-3.png);
  color: #aca899;
}
.xpui-btn:focus-visible > span {
  outline: 1px dotted #000;
  outline-offset: 1px;
}

/* ------------------------------------------- caixa de seleção e opção */
.xpui-check,
.xpui-radio {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.xpui-check input,
.xpui-radio input {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  background: url(/xp-ui/checkbox-0.png);
}
.xpui-check input:hover {
  background-image: url(/xp-ui/checkbox-1.png);
}
.xpui-check input:active {
  background-image: url(/xp-ui/checkbox-2.png);
}
.xpui-check input:disabled {
  background-image: url(/xp-ui/checkbox-3.png);
}
.xpui-check input:checked {
  background-image: url(/xp-ui/checkbox-4.png);
}
.xpui-check input:checked:hover {
  background-image: url(/xp-ui/checkbox-5.png);
}
.xpui-check input:checked:active {
  background-image: url(/xp-ui/checkbox-6.png);
}
.xpui-check input:checked:disabled {
  background-image: url(/xp-ui/checkbox-7.png);
}
.xpui-radio input {
  background: url(/xp-ui/radio-0.png);
}
.xpui-radio input:hover {
  background-image: url(/xp-ui/radio-1.png);
}
.xpui-radio input:active {
  background-image: url(/xp-ui/radio-2.png);
}
.xpui-radio input:disabled {
  background-image: url(/xp-ui/radio-3.png);
}
.xpui-radio input:checked {
  background-image: url(/xp-ui/radio-4.png);
}
.xpui-radio input:checked:hover {
  background-image: url(/xp-ui/radio-5.png);
}
.xpui-radio input:checked:active {
  background-image: url(/xp-ui/radio-6.png);
}
.xpui-radio input:checked:disabled {
  background-image: url(/xp-ui/radio-7.png);
}
.xpui-check:focus-within span,
.xpui-radio:focus-within span {
  outline: 1px dotted #000;
}

/* ------------------------------------------------------- caixa de grupo */
.xpui-group {
  border-style: solid;
  border-width: 4px;
  border-image: url(/xp-ui/groupbox.png) 4 fill stretch;
  border-image-outset: 0;
  background: none;
  margin: 0;
  padding: 0;
}
.xpui-group > .xpui-group-label {
  position: absolute;
  top: -1px;
  left: 6px;
  padding: 0 2px;
  color: #0046d5;
  background: inherit;
  line-height: 1;
  transform: translateY(-50%);
}
.xpui-group-bg {
  background: #ece9d8;
}

/* ------------------------------------------------------ campo de texto */
.xpui-edit,
.xpui-list {
  font: inherit;
  color: #000;
  background: #fff;
  border: 1px solid #7f9db9;
  outline: none;
  padding: 1px 3px;
  user-select: text;
}
.xpui-edit:disabled {
  background: #ebebe4;
  color: #aca899;
}
.xpui-list {
  overflow-y: auto;
  padding: 0;
}
.xpui-list > div {
  padding: 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xpui-list > div.is-on {
  background: #316ac5;
  color: #fff;
}

/* ------------------------------------------------------------- combo */
.xpui-combo {
  font: inherit;
  color: #000;
  height: 21px;
  border: 1px solid #7f9db9;
  padding: 0 18px 0 3px;
  appearance: none;
  -webkit-appearance: none;
  background: #fff url(/xp-ui/combo-glyph-0.png) no-repeat right 4px center;
  outline: none;
  position: relative;
}
.xpui-combo-wrap {
  position: relative;
  display: inline-block;
}
.xpui-combo-wrap:after {
  content: '';
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 15px;
  border-style: solid;
  border-width: 3px;
  border-image: url(/xp-ui/combo-0.png) 3 fill stretch;
  pointer-events: none;
}
.xpui-combo-wrap:hover:after {
  border-image-source: url(/xp-ui/combo-1.png);
}
.xpui-combo-wrap:active:after {
  border-image-source: url(/xp-ui/combo-2.png);
}
.xpui-combo-wrap:before {
  content: '';
  position: absolute;
  z-index: 1;
  right: 4px;
  top: 50%;
  margin-top: -3px;
  width: 10px;
  height: 7px;
  background: url(/xp-ui/combo-glyph-0.png);
  pointer-events: none;
}
.xpui-combo:focus {
  border-color: #7f9db9;
}

/* -------------------------------------------------- seta para cima/baixo */
.xpui-spin {
  display: inline-flex;
  flex-direction: column;
  width: 15px;
  gap: 0;
}
.xpui-spin button {
  flex: 1;
  min-height: 0;
  padding: 0;
  position: relative;
  border-style: solid;
  border-width: 2px;
  border-image: url(/xp-ui/spin-up-0.png) 4 fill stretch;
  border-image-width: 2px;
  background: none;
}
.xpui-spin button + button {
  border-image-source: url(/xp-ui/spin-down-0.png);
}
/* a seta fica acima do fundo (o "fill" do border-image cobre o background) */
.xpui-spin button:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 6px;
  margin: -3px 0 0 -4px;
  background: url(/xp-ui/spin-up-glyph-0.png) no-repeat;
}
.xpui-spin button + button:after {
  background-image: url(/xp-ui/spin-down-glyph-0.png);
}
.xpui-spin button:hover {
  border-image-source: url(/xp-ui/spin-up-1.png);
}
.xpui-spin button + button:hover {
  border-image-source: url(/xp-ui/spin-down-1.png);
}
.xpui-spin button:active {
  border-image-source: url(/xp-ui/spin-up-2.png);
}
.xpui-spin button + button:active {
  border-image-source: url(/xp-ui/spin-down-2.png);
}

/* ------------------------------------------------------------ guias */
.xpui-tabs {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.xpui-tablist {
  display: flex;
  padding-left: 2px;
  position: relative;
  z-index: 1;
  height: 21px;
  align-items: flex-end;
}
.xpui-tab {
  font: inherit;
  color: #000;
  height: 18px;
  padding: 0 1px;
  margin-right: -1px;
  border-style: solid;
  border-width: 6px 6px 0;
  border-image: url(/xp-ui/tab-0.png) 6 6 0 6 fill stretch;
  background: none;
  white-space: nowrap;
  outline: none;
  display: flex;
  align-items: center;
}
.xpui-tab > span {
  margin-top: -5px;
}
.xpui-tab:hover {
  border-image-source: url(/xp-ui/tab-1.png);
}
.xpui-tab.is-on {
  height: 21px;
  margin: 0 -2px 0 -2px;
  padding: 0 3px;
  border-image-source: url(/xp-ui/tab-top-2.png);
  position: relative;
  z-index: 2;
  margin-bottom: -1px;
}
.xpui-tab.is-on:first-child {
  margin-left: -2px;
  border-image-source: url(/xp-ui/tab-top-left-2.png);
}
.xpui-tab:focus-visible > span {
  outline: 1px dotted #000;
}
.xpui-pane {
  flex: 1;
  position: relative;
  border-style: solid;
  border-width: 2px 4px 4px 2px;
  border-image: url(/xp-ui/tab-pane.png) 2 4 4 2 stretch;
  background: #fcfcfe url(/xp-ui/tab-body.png) repeat-x;
  background-size: 100% 100%;
}
.xpui-pane .xpui-group > .xpui-group-label,
.xpui-pane .xpui-check,
.xpui-pane .xpui-radio,
.xpui-pane label {
  background: transparent;
}

/* ------------------------------------------------- barra de menus */
.xpui-menubar {
  display: flex;
  height: 19px;
  padding-left: 0;
  background: #ece9d8;
  border-bottom: 1px solid #fff;
  box-shadow: 0 -1px 0 #fff inset;
  position: relative;
  z-index: 3;
}
.xpui-menubar > button {
  font: inherit;
  color: #000;
  border: 0;
  background: none;
  padding: 0 6px;
  height: 18px;
  line-height: 18px;
}
.xpui-menubar > button.is-open,
.xpui-menubar.is-active > button:hover {
  background: #316ac5;
  color: #fff;
}
.xpui-menubar > button:hover {
  background: #316ac5;
  color: #fff;
}
.xpui-menu {
  position: absolute;
  z-index: 1000;
  min-width: 120px;
  background: #fff;
  border: 1px solid #aca899;
  box-shadow: 2px 2px 2px -1px rgba(0, 0, 0, 0.35);
  padding: 2px;
  font: 11px Tahoma, sans-serif;
}
.xpui-menu-item {
  display: flex;
  align-items: center;
  height: 17px;
  padding: 0 10px 0 17px;
  white-space: nowrap;
  position: relative;
  color: #000;
}
.xpui-menu-item:hover,
.xpui-menu-item.is-open {
  background: #316ac5;
  color: #fff;
}
.xpui-menu-item.is-disabled {
  color: #aca899;
}
.xpui-menu-item.is-disabled:hover {
  background: #316ac5;
  color: #aca899;
}
.xpui-menu-item .xpui-menu-key {
  margin-left: auto;
  padding-left: 22px;
}
.xpui-menu-item.is-checked:before {
  content: '✓';
  position: absolute;
  left: 4px;
  font-size: 11px;
}
.xpui-menu-item.is-radio:before {
  content: '';
  position: absolute;
  left: 6px;
  top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.xpui-menu-item.has-sub:after {
  content: '';
  position: absolute;
  right: 6px;
  top: 5px;
  border: 4px solid transparent;
  border-left-color: currentColor;
  border-right: 0;
}
.xpui-menu-sep {
  height: 1px;
  background: #aca899;
  margin: 3px 1px;
}
.xpui-u {
  text-decoration: none;
}
/* como no XP: a letra de atalho só aparece sublinhada com Alt pressionado */
.xp-show-keys .xpui-u {
  text-decoration: underline;
}

/* ------------------------------------------------------ barra de status */
.xpui-status {
  display: flex;
  height: 20px;
  align-items: center;
  border-top: 1px solid #fff;
  background: #ece9d8;
  box-shadow: 0 -1px 0 #aca899;
  padding: 0 0 0 3px;
}
.xpui-status-pane {
  height: 18px;
  line-height: 18px;
  padding: 0 4px;
  border-right: 1px solid #aca899;
  box-shadow: 1px 0 0 #fff;
  overflow: hidden;
  white-space: nowrap;
}
.xpui-status-grip {
  margin-left: auto;
  width: 13px;
  height: 13px;
  align-self: flex-end;
  background: url(/xp-ui/resize-grip-0.png) no-repeat right bottom;
}

/* ------------------------------------------------------- borda afundada */
.xpui-sunken {
  border: 1px solid;
  border-color: #aca899 #fff #fff #aca899;
  box-shadow: inset 1px 1px #716f64, inset -1px -1px #f1efe2;
}
.xpui-raised {
  border: 1px solid;
  border-color: #fff #716f64 #716f64 #fff;
  box-shadow: inset -1px -1px #aca899, inset 1px 1px #f1efe2;
}

/* ------------------------------------------------- barra de rolagem */
.xpui-scroll::-webkit-scrollbar {
  width: 17px;
  height: 17px;
}
.xpui-scroll::-webkit-scrollbar-track:vertical {
  background: url(/xp-ui/scroll-shaft-v-0.png);
  background-size: 100% 100%;
}
.xpui-scroll::-webkit-scrollbar-track:horizontal {
  background: url(/xp-ui/scroll-shaft-h-0.png);
  background-size: 100% 100%;
}
.xpui-scroll::-webkit-scrollbar-thumb:vertical {
  border-style: solid;
  border-width: 5px;
  border-image: url(/xp-ui/scroll-thumb-v-0.png) 5 fill stretch;
  background: url(/xp-ui/scroll-grip-v-0.png) no-repeat center;
}
.xpui-scroll::-webkit-scrollbar-thumb:horizontal {
  border-style: solid;
  border-width: 5px;
  border-image: url(/xp-ui/scroll-thumb-h-0.png) 5 fill stretch;
  background: url(/xp-ui/scroll-grip-h-0.png) no-repeat center;
}
.xpui-scroll::-webkit-scrollbar-button:single-button {
  width: 17px;
  height: 17px;
  background-size: 17px 17px;
}
.xpui-scroll::-webkit-scrollbar-button:vertical:decrement {
  background-image: url(/xp-ui/scroll-btn-up-0.png);
}
.xpui-scroll::-webkit-scrollbar-button:vertical:decrement:hover {
  background-image: url(/xp-ui/scroll-btn-up-1.png);
}
.xpui-scroll::-webkit-scrollbar-button:vertical:decrement:active {
  background-image: url(/xp-ui/scroll-btn-up-2.png);
}
.xpui-scroll::-webkit-scrollbar-button:vertical:increment {
  background-image: url(/xp-ui/scroll-btn-down-0.png);
}
.xpui-scroll::-webkit-scrollbar-button:vertical:increment:hover {
  background-image: url(/xp-ui/scroll-btn-down-1.png);
}
.xpui-scroll::-webkit-scrollbar-button:vertical:increment:active {
  background-image: url(/xp-ui/scroll-btn-down-2.png);
}
.xpui-scroll::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url(/xp-ui/scroll-btn-left-0.png);
}
.xpui-scroll::-webkit-scrollbar-button:horizontal:increment {
  background-image: url(/xp-ui/scroll-btn-right-0.png);
}
.xpui-scroll::-webkit-scrollbar-button:vertical:start:increment,
.xpui-scroll::-webkit-scrollbar-button:vertical:end:decrement,
.xpui-scroll::-webkit-scrollbar-button:horizontal:start:increment,
.xpui-scroll::-webkit-scrollbar-button:horizontal:end:decrement {
  display: none;
}
.xpui-scroll::-webkit-scrollbar-corner {
  background: #ece9d8;
}

/* linha gravada que separa os botões do assistente */
.xpui-etched {
  height: 0 !important;
  border-top: 1px solid #aca899;
  border-bottom: 1px solid #fff;
}