/**
 * Manic Pixels Web OS — Base CSS
 * Reset, tipografia e utilitários que consomem as CSS vars do sistema.
 * Nunca use cores, blur ou radius hard-coded aqui — sempre var(--mp-*).
 *
 * Sprint 1 — implementação completa
 */

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html, body {
  width:      100%;
  height:     100%;
  overflow:   hidden; /* O WebOS controla o scroll internamente */
  font-family: var(--mp-font-ui);
  font-size:   var(--mp-font-size-base);
  line-height: var(--mp-line-height);
  background:  var(--mp-window-bg-solid);
  color:       var(--mp-menu-fg);
  user-select: none; /* Seleção só dentro de inputs/editores */
  -webkit-font-smoothing: antialiased;
}

/* Permite seleção de texto em contextos de edição */
input, textarea, [contenteditable], .mp-selectable {
  user-select: text;
}

a { color: var(--mp-accent); text-decoration: none; }
a:hover { color: var(--mp-accent-hover); }

/* ── Transição global de tema ─────────────────────────────────────────── */
/* Adicionada/removida pelo ThemeManager para animar trocas de tema */
.mp-theme-transitioning * {
  transition: background-color 0.3s ease,
              border-color     0.3s ease,
              color            0.3s ease,
              box-shadow       0.3s ease !important;
}

/* ── Workspace ──────────────────────────────────────────────────────────── */
#mp-desktop {
  position:   relative;
  width:       100vw;
  height:      100vh;
  overflow:    hidden;
}

#mp-workspace {
  position:   absolute;
  inset:      0;
  bottom:     var(--mp-taskbar-height); /* espaço para taskbar bottom (padrão) */
}

#mp-workspace.taskbar-top    { top:    var(--mp-taskbar-height); bottom: 0; }
#mp-workspace.taskbar-left   { left:   var(--mp-taskbar-height); right:  0; bottom: 0; }
#mp-workspace.taskbar-right  { right:  var(--mp-taskbar-height); left:   0; bottom: 0; }

/* ── Skeleton / Loading states ──────────────────────────────────────────── */
.mp-skeleton {
  background: var(--mp-skeleton-bg);
  border-radius: var(--mp-btn-radius);
  position: relative;
  overflow: hidden;
}

.mp-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--mp-skeleton-shimmer) 50%,
    transparent 100%
  );
  animation: mp-shimmer 1.5s infinite;
}

@keyframes mp-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── Empty States ───────────────────────────────────────────────────────── */
.mp-empty-state {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content:center;
  gap:            var(--mp-gap-md);
  padding:        var(--mp-gap-xl);
  color:          rgba(255, 255, 255, 0.35);
  text-align:     center;
}

.mp-empty-state__icon  { font-size: 48px; opacity: 0.4; }
.mp-empty-state__title { font-size: var(--mp-font-size-lg); }
.mp-empty-state__desc  { font-size: var(--mp-font-size-sm); }

/* ── Progress Bar ───────────────────────────────────────────────────────── */
.mp-progress {
  width:         100%;
  height:        var(--mp-progress-height);
  background:    var(--mp-progress-track);
  border-radius: var(--mp-progress-radius);
  overflow:      hidden;
}

.mp-progress__fill {
  height:           100%;
  background:       var(--mp-progress-fill);
  border-radius:    var(--mp-progress-radius);
  transition:       width 0.2s ease;
  will-change:      width;
}

/* ── Scrollbar nativa (fallback quando SimpleBar não estiver ativo) ─────── */
::-webkit-scrollbar               { width: var(--mp-scrollbar-width); height: var(--mp-scrollbar-width); }
::-webkit-scrollbar-track         { background: var(--mp-scrollbar-track); }
::-webkit-scrollbar-thumb         { background: var(--mp-scrollbar-thumb); border-radius: var(--mp-scrollbar-radius); }
::-webkit-scrollbar-thumb:hover   { background: var(--mp-scrollbar-thumb-hover); }

/* ── Utilitários ────────────────────────────────────────────────────────── */
.mp-glass {
  background:       var(--mp-window-bg);
  backdrop-filter:  blur(var(--mp-window-blur));
  -webkit-backdrop-filter: blur(var(--mp-window-blur));
  border:           var(--mp-window-border-width) solid var(--mp-window-border);
}

.mp-no-glass .mp-glass,
.fx-glass-off .mp-glass {
  background:       var(--mp-window-bg-solid) !important;
  backdrop-filter:  none !important;
  -webkit-backdrop-filter: none !important;
}

.mp-overlay {
  position:   fixed;
  inset:      0;
  background: var(--mp-overlay-bg);
  z-index:    9000;
}

/* Cursor customizado (aplicado em boot quando fx.cursor.custom = true) */
/* Cursor customizado — regra base substituída dinamicamente por
   CursorManager.init() via <style id="mp-cursor-style"> com PNGs do Kenney Cursor Pack.
   Esta declaração é um fallback de último recurso caso o módulo ainda não tenha carregado. */
body.mp-cursor-custom { cursor: url('assets/images/system/cursors/cursor_none.png') 5 3, default; }

/* ── Boot Screen ────────────────────────────────────────────────────────── */
#mp-boot-screen {
  position:        fixed;
  inset:           0;
  z-index:         99999;
  background:      #1b1e2e;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      opacity 0.4s ease;
}

.mp-boot-inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            16px;
}

.mp-boot-logo {
  width:   64px;
  height:  64px;
  animation: mp-boot-pulse 2s ease-in-out infinite;
}

@keyframes mp-boot-pulse {
  0%, 100% { opacity: 1;    transform: scale(1);    }
  50%       { opacity: 0.75; transform: scale(0.96); }
}

.mp-boot-name {
  font-family:    var(--mp-font-ui, system-ui, sans-serif);
  font-size:      18px;
  font-weight:    300;
  letter-spacing: 0.12em;
  color:          rgba(255, 255, 255, 0.75);
}

.mp-boot-bar {
  width:         180px;
  height:        3px;
  background:    rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow:      hidden;
}

.mp-boot-bar-fill {
  height:      100%;
  width:       0;
  background:  #3daee9;
  border-radius: 2px;
  animation:   mp-boot-progress 1.8s ease-in-out forwards;
}

@keyframes mp-boot-progress {
  0%   { width: 0%;   }
  40%  { width: 60%;  }
  80%  { width: 85%;  }
  100% { width: 100%; }
}