/* ═══════════════════════════════════════════════════════════
   GraviTask — Global Modal CSS & Viewport Centering Enforcement
   ═══════════════════════════════════════════════════════════ */

@import url('./styles.css');

/* บังคับ Overlay คลุมเต็มหน้าจอ และจัดกล่อง Modal ให้อยู่กึ่งกลางเสมอ */
.modal-overlay,
.modal-backdrop,
div[id$="Modal"] {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(4px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999 !important;
  padding: 16px !important;
  margin: 0 !important;
}

/* กล่องเนื้อหาด้านใน Modal ทุกตัว */
.modal-content,
.modal-dialog,
.modal-card,
div[id$="Modal"] > div {
  position: relative !important;
  margin: auto !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  border-radius: 1rem !important;
}

/* ═════════════════════════════════════════════════════════════
   GraviTask — Root Viewport & Mobile Overflow Protection
   ═════════════════════════════════════════════════════════════ */
html,
body,
#app-layout {
  max-width: 100vw !important;
  width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

#main-wrapper {
  max-width: 100vw !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

@media (max-width: 768px) {
  #main-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
  #app-main {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding: 1rem !important;
  }
}

/* Kanban Board Horizontal Isolated Container */
#view-kanban {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.kanban-board {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  padding-bottom: 1rem !important;
  box-sizing: border-box !important;
}

.kanban-col {
  flex-shrink: 0 !important;
  width: 280px !important;
  min-width: 280px !important;
  max-width: 320px !important;
  box-sizing: border-box !important;
}

@media (min-width: 1280px) {
  .kanban-board {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    overflow-x: visible !important;
  }
  .kanban-col {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex-shrink: 1 !important;
  }
}

/* Profile View Mobile Vertical Stack & Spacing Enforcement */
#view-profile {
  padding-bottom: 7rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.profile-page-grid {
  padding-bottom: 7rem !important;
  width: 100% !important;
  max-width: 1100px !important;
  box-sizing: border-box !important;
}

@media (max-width: 1023px) {
  .profile-page-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 1.5rem !important;
  }
}

.profile-stat-label {
  white-space: nowrap !important;
}