/* =========================================================================
   Work Hours Widget — versão Web
   Portado de SwiftUI (macOS) para HTML + CSS puro.
   Todas as posições/cores/medidas abaixo vêm de DesignTokens.swift original
   (extraídas do Figma "Teste Dashboard", frame 559:44) e foram mantidas
   em pixels CSS (1pt do Figma/SwiftUI == 1px aqui).
   ========================================================================= */

@font-face {
  font-family: "Aleo";
  src: url("assets/fonts/Aleo-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Bitcount Prop Single";
  src: url("assets/fonts/BitcountPropSingle-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Bitcount Prop Single";
  src: url("assets/fonts/BitcountPropSingle-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  /* usada só como fallback do título, caso o SVG do vetor não carregue —
     igual ao fallback de Text("work hours").font(titleFont()) no original */
  font-family: "Coral Pixels";
  src: url("assets/fonts/CoralPixels-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --card-width: 482px;
  --card-height: 468px;

  --background-blue: #2469ab;
  --decor-blue: #2873ae;
  --decor-glass: #d9d9d9;
  --decor-pink: #e05181;
  --decor-pink-noise-tint: rgb(240, 107, 166);

  --gold: #e7b213;
  --counter-pink: #fbb2ce;
  --lunch-row-teal: #268c8f;
  --row-stroke: #629741;

  --row-stroke-width: 0.734px;
  --row-padding: 7.34px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
}

/* Fundo da página — só decorativo, representa o "Desktop" atrás do widget */
#page-backdrop {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, #223347 0%, #0f1720 70%);
  z-index: 0;
}

/* =========================================================================
   Wrapper arrastável + redimensionável (equivalente da NSWindow borderless,
   flutuante, sempre-por-cima, com aspect ratio travado em 482:468)
   ========================================================================= */
#widget-wrapper {
  position: fixed;
  left: 50%;
  top: 50%;
  width: var(--card-width);
  height: var(--card-height);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45));
  overflow: hidden;
  z-index: 10;
  touch-action: none;
}

#widget-wrapper.dragging,
#widget-wrapper.resizing {
  transition: none;
}

.card {
  position: relative;
  width: var(--card-width);
  height: var(--card-height);
  /* o cartão em si é sempre construído no tamanho fixo original (482x468) e
     escalado via transform no wrapper — igual ao GeometryReader+scaleEffect
     do WorkHoursCardView original */
  transform-origin: top left;
  background: var(--background-blue);
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.card:active {
  cursor: grabbing;
}

/* =========================================================================
   Fundo decorativo (4 formas) — node 559:46/48/49/45
   Aproximação dos efeitos GLASS/NOISE do Figma via blur + baixa opacidade,
   igual à nota de fidelidade do DecorativeBackground.swift original.
   ========================================================================= */
.decorative-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.decor {
  position: absolute;
  border-radius: 50%;
}

.decor-1 {
  left: -74.12px;
  top: -69.74px;
  width: 470.94px;
  height: 470.94px;
  background: var(--decor-blue);
  filter: blur(60px);
}

.decor-2 {
  left: -144.23px;
  top: 108px;
  width: 498.12px;
  height: 399.96px;
  background: var(--decor-glass);
  opacity: 0.068; /* fill-opacity 0.2 * view-opacity 0.34, igual ao Swift */
  filter: blur(18px);
}

.decor-3 {
  left: 622.25px;
  top: 154.2px;
  width: 432.07px;
  height: 273.94px;
  background: var(--decor-glass);
  opacity: 0.068;
  filter: blur(18px);
  transform: rotate(-157.02deg);
}

.decor-4a {
  left: 369.89px;
  top: 214.26px;
  width: 403.45px;
  height: 403.45px;
  background: var(--decor-pink);
  filter: blur(45px);
}

.decor-4b {
  left: 369.89px;
  top: 214.26px;
  width: 403.45px;
  height: 403.45px;
  background: var(--decor-pink-noise-tint);
  opacity: 0.25;
  filter: blur(60px);
}

/* =========================================================================
   Título "work hours" (vetor) — node 565:88
   ========================================================================= */
.title-button {
  position: absolute;
  left: 40.33px;
  top: 29.37px;
  width: 130.05px;
  height: 20.33px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 2;
}

.title-button img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* =========================================================================
   Contadores "total:" e "miss:" — node 559:27 / 559:35
   ========================================================================= */
.counter-text {
  position: absolute;
  color: var(--counter-pink);
  font-family: "Bitcount Prop Single", sans-serif;
  font-size: 20px;
  line-height: 1.15;
  white-space: pre-line; /* honra o "\n" literal do texto de "miss" */
  pointer-events: none;
  z-index: 2;
}

#total-counter {
  left: 279.89px;
  top: 37.37px;
}

.missing-counter {
  left: 279.89px;
  top: 67px;
  width: 200px;
}

.counter-text .label {
  font-weight: 500; /* Bitcount Prop Single Medium — igual a .weight(.medium) no Swift */
}

.counter-text .value {
  font-weight: 400;
}

/* =========================================================================
   4 copos de água — node 565:111
   ========================================================================= */
.water-glass-row {
  position: absolute;
  left: 279.89px;
  top: 128.7px;
  display: flex;
  gap: 7px;
  z-index: 2;
}

.water-glass {
  position: relative;
  width: 35.97px;
  height: 35.97px;
  padding: 0;
  border: 0.69px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  cursor: pointer;
  overflow: hidden;
}

.water-glass .glass-fill {
  position: absolute;
  inset: 0;
  left: 0;
  width: 0%;
  background: var(--lunch-row-teal);
  pointer-events: none;
}

.water-glass.filled .glass-fill {
  width: 100%;
}

.water-glass img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 6px;
  box-sizing: border-box;
  pointer-events: none;
}

/* =========================================================================
   Linha do tempo: entrada / almoço / saída — node 559:16/37/41
   ========================================================================= */
.timeline {
  position: absolute;
  left: 40.33px;
  top: 120.63px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 2;
  /* O texto de apoio do almoço ("Pressione para cumprir...") alarga a caixa
     desta coluna bem além da largura visível das 3 linhas — sem isso, essa
     área "vazia" ficaria por cima do fundo/copos de água (que estão à
     direita) e roubaria os cliques deles, mesmo sem nada visível ali. Só as
     linhas realmente clicáveis reativam pointer-events abaixo. */
  pointer-events: none;
}

.timeline-row {
  display: inline-block;
  padding: var(--row-padding);
  border: var(--row-stroke-width) solid var(--row-stroke);
  background: transparent;
  white-space: nowrap;
  pointer-events: auto;
}

button.timeline-row {
  cursor: pointer;
}

.row-value {
  font-family: "Aleo", serif;
  font-size: 70.45px;
  line-height: 1;
  color: var(--gold);
  white-space: nowrap;
}

.lunch-line {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lunch-row {
  position: relative;
  overflow: hidden;
}

.lunch-fill {
  position: absolute;
  inset: 0;
  left: 0;
  width: 0%;
  background: var(--lunch-row-teal);
  pointer-events: none;
  z-index: -1;
}

.lunch-row.confirmed .lunch-fill {
  width: 100%;
}

.lunch-hint {
  margin: 0;
  max-width: 110px;
  font-size: 11px;
  font-weight: 500;
  font-family: system-ui, sans-serif;
  color: rgba(231, 178, 19, 0.85); /* gold @ 0.85 opacity */
  text-align: left;
  transition: opacity 0.2s ease-out;
}

.lunch-hint.hidden {
  opacity: 0;
  pointer-events: none;
}

/* =========================================================================
   Botões de janela (fechar / minimizar) — não existem no Figma
   ========================================================================= */
.window-button {
  position: absolute;
  top: 8px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  color: rgba(231, 178, 19, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
}

#minimize-button {
  left: calc(var(--card-width) - 54px);
}

#close-button {
  left: calc(var(--card-width) - 28px);
}

/* =========================================================================
   Alça de redimensionamento (equivalente às bordas arrastáveis da NSWindow)
   ========================================================================= */
#resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  z-index: 4;
  background: linear-gradient(
    135deg,
    transparent 0%,
    transparent 45%,
    rgba(255, 255, 255, 0.35) 45%,
    rgba(255, 255, 255, 0.35) 55%,
    transparent 55%,
    transparent 100%
  );
}

/* =========================================================================
   Estado "minimizado" — colapsa o cartão numa barrinha compacta
   ========================================================================= */
#widget-wrapper.minimized .card {
  width: 220px;
  height: 40px;
}

#widget-wrapper.minimized {
  width: 220px;
  height: 40px;
}

#widget-wrapper.minimized .decorative-bg,
#widget-wrapper.minimized .title-button,
#widget-wrapper.minimized .missing-counter,
#widget-wrapper.minimized .water-glass-row,
#widget-wrapper.minimized .timeline,
#widget-wrapper.minimized #resize-handle {
  display: none;
}

#widget-wrapper.minimized #total-counter {
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
}

#widget-wrapper.minimized .window-button {
  top: 10px;
}

#widget-wrapper.minimized #minimize-button {
  left: calc(220px - 54px);
}

#widget-wrapper.minimized #close-button {
  left: calc(220px - 28px);
}

/* =========================================================================
   Chip para reabrir o widget (equivalente ao ícone no Dock)
   ========================================================================= */
.reopen-chip {
  position: fixed;
  right: 24px;
  bottom: 24px;
  padding: 10px 16px;
  border: none;
  border-radius: 999px;
  background: var(--background-blue);
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  z-index: 20;
}

/* =========================================================================
   Menu de contexto (clique direito) e popovers de edição
   ========================================================================= */
.context-menu {
  position: fixed;
  min-width: 200px;
  background: #ffffff;
  color: #1c1c1e;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  padding: 4px;
  z-index: 100;
  font-size: 13px;
}

.context-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  border: 0;
  background: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  color: inherit;
}

.context-menu button:hover {
  background: #eef1f5;
}

.context-divider {
  height: 1px;
  margin: 4px 6px;
  background: #e2e2e2;
}

.popover-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: transparent;
}

.popover {
  position: fixed;
  z-index: 91;
  background: #ffffff;
  color: #1c1c1e;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  padding: 16px;
  width: 260px;
  font-size: 13px;
}

.popover h3 {
  margin: 0 0 10px 0;
  font-size: 14px;
}

.popover p.caption {
  margin: 10px 0 0 0;
  font-size: 11.5px;
  color: #6b6b70;
}

.popover .field-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d7d7db;
  border-radius: 6px;
  overflow: hidden;
}

.stepper button {
  width: 26px;
  height: 26px;
  border: 0;
  background: #f2f2f4;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.stepper button:hover {
  background: #e4e4e8;
}

.stepper span {
  min-width: 56px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

input[type="time"] {
  font-size: 14px;
  padding: 4px 6px;
}

@media (prefers-reduced-motion: no-preference) {
  .lunch-fill,
  .glass-fill {
    transition: width 0.05s linear;
  }
}