/* ========================================
   NUVEMSHOP STATUS PAGE - CSS COMPLETO
   Responsivo para todos os dispositivos
   ======================================== */

/* Fundo gradiente azul escuro */
html, body { 
  background: linear-gradient(180deg, #0f172a 0%, #1e3a8a 100%)!important;
  min-height: 100vh!important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif!important;
}

/* Header transparente */
.page-header, .masthead, .masthead-wrapper, header {
  background: transparent!important;
}

/* Ocultar histórico e footer */
.incidents-list, .page-footer { 
  display: none!important; 
}

/* ========================================
   CONTAINER PRINCIPAL
   ======================================== */
.layout-content {
  background: linear-gradient(180deg, rgba(30,58,138,0.6) 0%, rgba(15,23,42,0.8) 100%)!important;
  border: 1px solid rgba(59,130,246,0.3)!important;
  max-width: 800px!important;
  margin: 40px auto!important;
  border-radius: 20px!important;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1)!important;
  overflow: hidden!important;
  padding-bottom: 32px!important;
}

/* ========================================
   HEADER - Esconder elementos nativos
   ======================================== */
.page-header {
  text-align: center!important;
  padding: 0!important;
}

.page-header .logo-container {
  display: none!important;
}

/* ========================================
   BOTÃO SUBSCRIBE (nativo do Statuspage)
   ======================================== */
.show-updates-dropdown,
#show-updates-dropdown,
a.show-updates-dropdown,
[data-js-hook="show-updates-dropdown"] {
  background: transparent!important;
  border: 2px solid rgba(255,255,255,0.4)!important;
  color: #fff!important;
  border-radius: 12px!important;
  padding: 14px 28px!important;
  font-weight: 600!important;
  font-size: 14px!important;
  box-shadow: none!important;
  text-decoration: none!important;
}

.show-updates-dropdown:hover {
  background: rgba(255,255,255,0.15)!important;
  border-color: rgba(255,255,255,0.6)!important;
}

.subscribe-text-full,
.subscribe-text-short {
  color: #fff!important;
}

/* Dropdown do subscribe */
.updates-dropdown {
  background: rgba(15,23,42,0.98)!important;
  border: 1px solid rgba(59,130,246,0.3)!important;
  border-radius: 16px!important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5)!important;
}

.updates-dropdown input {
  background: rgba(255,255,255,0.1)!important;
  border: 1px solid rgba(255,255,255,0.2)!important;
  border-radius: 8px!important;
  color: #fff!important;
}

.updates-dropdown .btn,
.updates-dropdown button[type="submit"] {
  background: linear-gradient(135deg, #3b82f6 0%, #2356D1 100%)!important;
  border: none!important;
  border-radius: 8px!important;
  color: #fff!important;
}

/* ========================================
   STATUS BANNER
   ======================================== */
.page-status {
  margin: 0 24px 24px!important;
  border-radius: 14px!important;
  padding: 20px 28px!important;
  font-weight: 600!important;
  border: none!important;
}

.page-status.status-green { 
  background: linear-gradient(135deg, #059669 0%, #10b981 100%)!important;
  box-shadow: 0 8px 32px rgba(16,185,129,0.4)!important;
  color: #fff!important;
}

/* ========================================
   COMPONENTES
   ======================================== */
.components-section { 
  padding: 0 24px!important; 
}

.component-container {
  background: linear-gradient(135deg, rgba(30,58,138,0.5) 0%, rgba(15,23,42,0.6) 100%)!important;
  border: 1px solid rgba(59,130,246,0.2)!important;
  border-radius: 12px!important;
  margin-bottom: 10px!important;
  padding: 18px 24px!important;
  transition: all 0.2s ease!important;
}

.component-container:hover {
  background: linear-gradient(135deg, rgba(59,130,246,0.3) 0%, rgba(30,58,138,0.5) 100%)!important;
  border-color: rgba(59,130,246,0.5)!important;
  transform: translateX(6px)!important;
}

.component-container .name {
  color: #fff!important;
  font-weight: 500!important;
}

.component-status.status-green { 
  color: #34d399!important; 
  font-weight: 600!important;
}

/* ========================================
   INCIDENTES
   ======================================== */
.unresolved-incidents {
  display: block!important;
  padding: 0 24px!important;
}

.unresolved-incident {
  background: rgba(15, 23, 42, 0.6)!important;
  border: 1px solid rgba(245, 158, 11, 0.5)!important;
  border-radius: 12px!important;
  margin-bottom: 16px!important;
  overflow: hidden!important;
}

.unresolved-incident .incident-title {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%)!important;
  color: #fff!important;
  padding: 16px 20px!important;
  padding-right: 110px!important;
  font-weight: 600!important;
  font-size: 16px!important;
  position: relative!important;
}

.unresolved-incident .incident-title a {
  color: #fff!important;
  text-decoration: none!important;
}

.unresolved-incident .updates {
  padding: 16px 20px!important;
  background: rgba(15, 23, 42, 0.6)!important;
}

.unresolved-incident .update {
  color: #e2e8f0!important;
  font-size: 14px!important;
  line-height: 1.6!important;
}

.unresolved-incident .update-title {
  color: #f59e0b!important;
  font-weight: 600!important;
}

.unresolved-incident .update-timestamp {
  color: rgba(255,255,255,0.5)!important;
  font-size: 12px!important;
}

/* Subscribe nos incidentes - posicionado no título */
.unresolved-incident a[href*="subscribe"],
.unresolved-incident .incident-subscribe {
  position: absolute!important;
  top: 50%!important;
  right: 16px!important;
  transform: translateY(-50%)!important;
  color: #fff!important;
  background: rgba(0,0,0,0.2)!important;
  border: 1px solid rgba(255,255,255,0.4)!important;
  padding: 6px 12px!important;
  border-radius: 6px!important;
  font-size: 12px!important;
  text-decoration: none!important;
  white-space: nowrap!important;
}

.unresolved-incident a[href*="subscribe"]:hover,
.unresolved-incident .incident-subscribe:hover {
  background: rgba(0,0,0,0.4)!important;
  border-color: rgba(255,255,255,0.6)!important;
}

/* Links */
a { 
  color: #60a5fa!important; 
}

/* ========================================
   TELAS GRANDES - Desktop/Monitor (1200px+)
   ======================================== */
@media (min-width: 1200px) {
  .layout-content {
    max-width: 900px!important;
    margin: 60px auto!important;
  }
  
  .page-status {
    padding: 24px 32px!important;
    font-size: 18px!important;
  }
  
  .component-container {
    padding: 20px 28px!important;
  }
  
  .component-container .name {
    font-size: 16px!important;
  }
}

/* ========================================
   TELAS EXTRA GRANDES - 4K/Ultrawide (1600px+)
   ======================================== */
@media (min-width: 1600px) {
  .layout-content {
    max-width: 1000px!important;
    margin: 80px auto!important;
    border-radius: 24px!important;
  }
  
  .page-status {
    margin: 0 32px 32px!important;
    padding: 28px 36px!important;
    border-radius: 16px!important;
    font-size: 20px!important;
  }
  
  .components-section {
    padding: 0 32px!important;
  }
  
  .component-container {
    padding: 22px 32px!important;
    border-radius: 14px!important;
    margin-bottom: 12px!important;
  }
  
  .component-container .name {
    font-size: 17px!important;
  }
  
  .unresolved-incidents {
    padding: 0 32px!important;
  }
  
  .unresolved-incident .incident-title {
    padding: 20px 24px!important;
    padding-right: 120px!important;
    font-size: 18px!important;
  }
  
  .unresolved-incident .updates {
    padding: 20px 24px!important;
  }
  
  .unresolved-incident .update {
    font-size: 15px!important;
  }
}

/* ========================================
   LAPTOP PEQUENO / TABLET LANDSCAPE (1024px - 1199px)
   ======================================== */
@media (min-width: 1024px) and (max-width: 1199px) {
  .layout-content {
    max-width: 780px!important;
    margin: 32px auto!important;
  }
}

/* ========================================
   TABLET PORTRAIT - iPad, Galaxy Tab (768px - 1023px)
   ======================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .layout-content {
    max-width: 720px!important;
    margin: 24px auto!important;
    border-radius: 18px!important;
  }
  
  .page-status {
    margin: 0 20px 20px!important;
    padding: 18px 24px!important;
  }
  
  .components-section {
    padding: 0 20px!important;
  }
  
  .component-container {
    padding: 16px 20px!important;
  }
  
  .unresolved-incidents {
    padding: 0 20px!important;
  }
  
  .unresolved-incident .incident-title {
    padding: 14px 18px!important;
    padding-right: 100px!important;
    font-size: 15px!important;
  }
  
  .unresolved-incident .updates {
    padding: 14px 18px!important;
  }
}

/* ========================================
   TABLET PEQUENO / PHABLET (600px - 767px)
   iPad Mini, Galaxy Tab A
   ======================================== */
@media (min-width: 600px) and (max-width: 767px) {
  .layout-content {
    margin: 16px!important;
    border-radius: 16px!important;
  }
  
  .page-status {
    margin: 0 18px 18px!important;
    padding: 16px 20px!important;
    font-size: 15px!important;
  }
  
  .components-section {
    padding: 0 18px!important;
  }
  
  .component-container {
    padding: 14px 18px!important;
    border-radius: 10px!important;
  }
  
  .component-container .name {
    font-size: 14px!important;
  }
  
  .component-container:hover {
    transform: none!important;
  }
  
  .unresolved-incidents {
    padding: 0 18px!important;
  }
  
  .unresolved-incident .incident-title {
    padding: 12px 16px!important;
    padding-right: 95px!important;
    font-size: 14px!important;
  }
  
  .unresolved-incident .updates {
    padding: 12px 16px!important;
  }
  
  .unresolved-incident .update {
    font-size: 13px!important;
  }
  
  .unresolved-incident a[href*="subscribe"],
  .unresolved-incident .incident-subscribe {
    padding: 5px 10px!important;
    font-size: 11px!important;
    right: 14px!important;
  }
}

/* ========================================
   CELULAR GRANDE (480px - 599px)
   iPhone Plus/Max, Galaxy S Ultra, Pixel XL
   ======================================== */
@media (min-width: 480px) and (max-width: 599px) {
  .layout-content {
    margin: 12px!important;
    border-radius: 14px!important;
    padding-bottom: 24px!important;
  }
  
  .page-status {
    margin: 0 14px 14px!important;
    padding: 14px 16px!important;
    border-radius: 10px!important;
    font-size: 14px!important;
  }
  
  .components-section {
    padding: 0 14px!important;
  }
  
  .component-container {
    padding: 12px 14px!important;
    border-radius: 10px!important;
    margin-bottom: 8px!important;
  }
  
  .component-container .name {
    font-size: 13px!important;
  }
  
  .component-container:hover {
    transform: none!important;
  }
  
  .unresolved-incidents {
    padding: 0 14px!important;
  }
  
  .unresolved-incident {
    margin-bottom: 10px!important;
    border-radius: 10px!important;
  }
  
  .unresolved-incident .incident-title {
    padding: 11px 14px!important;
    padding-right: 85px!important;
    font-size: 13px!important;
  }
  
  .unresolved-incident .updates {
    padding: 11px 14px!important;
  }
  
  .unresolved-incident .update {
    font-size: 12px!important;
  }
  
  .unresolved-incident a[href*="subscribe"],
  .unresolved-incident .incident-subscribe {
    padding: 4px 8px!important;
    font-size: 10px!important;
    right: 12px!important;
  }
}

/* ========================================
   CELULAR MÉDIO (400px - 479px)
   iPhone 12/13/14, Galaxy S, Pixel
   ======================================== */
@media (min-width: 400px) and (max-width: 479px) {
  .layout-content {
    margin: 10px!important;
    border-radius: 12px!important;
    padding-bottom: 20px!important;
  }
  
  .page-status {
    margin: 0 12px 12px!important;
    padding: 12px 14px!important;
    border-radius: 8px!important;
    font-size: 13px!important;
  }
  
  .components-section {
    padding: 0 12px!important;
  }
  
  .component-container {
    padding: 11px 12px!important;
    border-radius: 8px!important;
    margin-bottom: 6px!important;
  }
  
  .component-container .name {
    font-size: 12px!important;
  }
  
  .unresolved-incidents {
    padding: 0 12px!important;
  }
  
  .unresolved-incident {
    margin-bottom: 8px!important;
    border-radius: 8px!important;
  }
  
  .unresolved-incident .incident-title {
    padding: 10px 12px!important;
    padding-right: 75px!important;
    font-size: 12px!important;
  }
  
  .unresolved-incident .updates {
    padding: 10px 12px!important;
  }
  
  .unresolved-incident .update {
    font-size: 11px!important;
    line-height: 1.5!important;
  }
  
  .unresolved-incident .update-timestamp {
    font-size: 10px!important;
  }
  
  .unresolved-incident a[href*="subscribe"],
  .unresolved-incident .incident-subscribe {
    padding: 3px 7px!important;
    font-size: 9px!important;
    right: 10px!important;
  }
}

/* ========================================
   CELULAR PEQUENO (360px - 399px)
   iPhone SE, Galaxy A, Moto G
   ======================================== */
@media (min-width: 360px) and (max-width: 399px) {
  .layout-content {
    margin: 8px!important;
    border-radius: 10px!important;
    padding-bottom: 16px!important;
  }
  
  .page-status {
    margin: 0 10px 10px!important;
    padding: 10px 12px!important;
    border-radius: 8px!important;
    font-size: 12px!important;
  }
  
  .components-section {
    padding: 0 10px!important;
  }
  
  .component-container {
    padding: 10px 11px!important;
    border-radius: 8px!important;
    margin-bottom: 6px!important;
  }
  
  .component-container .name {
    font-size: 11px!important;
  }
  
  .unresolved-incidents {
    padding: 0 10px!important;
  }
  
  .unresolved-incident {
    margin-bottom: 8px!important;
    border-radius: 8px!important;
  }
  
  .unresolved-incident .incident-title {
    padding: 9px 10px!important;
    padding-right: 70px!important;
    font-size: 11px!important;
  }
  
  .unresolved-incident .updates {
    padding: 9px 10px!important;
  }
  
  .unresolved-incident .update {
    font-size: 10px!important;
    line-height: 1.4!important;
  }
  
  .unresolved-incident .update-timestamp {
    font-size: 9px!important;
  }
  
  .unresolved-incident a[href*="subscribe"],
  .unresolved-incident .incident-subscribe {
    padding: 3px 6px!important;
    font-size: 8px!important;
    right: 8px!important;
  }
}

/* ========================================
   CELULAR MUITO PEQUENO (320px - 359px)
   iPhone 5/SE 1ª geração, Galaxy J
   ======================================== */
@media (min-width: 320px) and (max-width: 359px) {
  .layout-content {
    margin: 6px!important;
    border-radius: 8px!important;
    padding-bottom: 14px!important;
  }
  
  .page-status {
    margin: 0 8px 8px!important;
    padding: 8px 10px!important;
    border-radius: 6px!important;
    font-size: 11px!important;
  }
  
  .components-section {
    padding: 0 8px!important;
  }
  
  .component-container {
    padding: 8px 10px!important;
    border-radius: 6px!important;
    margin-bottom: 5px!important;
  }
  
  .component-container .name {
    font-size: 10px!important;
  }
  
  .unresolved-incidents {
    padding: 0 8px!important;
  }
  
  .unresolved-incident {
    margin-bottom: 6px!important;
    border-radius: 6px!important;
  }
  
  .unresolved-incident .incident-title {
    padding: 8px!important;
    padding-right: 60px!important;
    font-size: 10px!important;
  }
  
  .unresolved-incident .updates {
    padding: 8px!important;
  }
  
  .unresolved-incident .update {
    font-size: 9px!important;
    line-height: 1.4!important;
  }
  
  .unresolved-incident .update-timestamp {
    font-size: 8px!important;
  }
  
  .unresolved-incident a[href*="subscribe"],
  .unresolved-incident .incident-subscribe {
    padding: 2px 5px!important;
    font-size: 7px!important;
    right: 6px!important;
  }
}

/* ========================================
   CELULAR MINÚSCULO (< 320px)
   Dispositivos muito antigos
   ======================================== */
@media (max-width: 319px) {
  .layout-content {
    margin: 4px!important;
    border-radius: 6px!important;
    padding-bottom: 12px!important;
  }
  
  .page-status {
    margin: 0 6px 6px!important;
    padding: 6px 8px!important;
    border-radius: 4px!important;
    font-size: 10px!important;
  }
  
  .components-section {
    padding: 0 6px!important;
  }
  
  .component-container {
    padding: 6px 8px!important;
    border-radius: 4px!important;
    margin-bottom: 4px!important;
  }
  
  .component-container .name {
    font-size: 9px!important;
  }
  
  .unresolved-incidents {
    padding: 0 6px!important;
  }
  
  .unresolved-incident .incident-title {
    padding: 6px!important;
    padding-right: 50px!important;
    font-size: 9px!important;
  }
  
  .unresolved-incident .updates {
    padding: 6px!important;
  }
  
  .unresolved-incident .update {
    font-size: 8px!important;
  }
  
  .unresolved-incident a[href*="subscribe"],
  .unresolved-incident .incident-subscribe {
    padding: 2px 4px!important;
    font-size: 6px!important;
    right: 4px!important;
  }
}