/* ==========================================================================
   PMS Core CRM — Comprehensive Responsive, Reactive & Adaptive Stylesheet
   Targets: Mobile (320px-639px), Tablet (640px-1023px), Desktop (1024px+)
   ========================================================================== */

/* ─── 1. Base Reset & Root Variables ────────────────────────────────────── */
:root {
  --crm-sidebar-width: 15rem; /* 240px */
  --crm-header-height: 4rem;  /* 64px */
}

html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  -webkit-text-size-adjust: 100%;
}

/* Ensure all flex and grid children can shrink without overflowing */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ─── 2. Responsive Mobile Sidebar & Drawer Architecture ────────────────── */
@media (max-width: 1023px) {
  /* Turn fixed desktop sidebar into an off-canvas drawer */
  body aside {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(280px, 85vw) !important;
    max-width: 85vw !important;
    z-index: 9990 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6) !important;
    background: #0f1420 !important;
  }

  /* When sidebar is opened */
  body.crm-sidebar-open aside {
    transform: translateX(0) !important;
  }

  /* Backdrop for mobile drawer */
  #crm-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9989;
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  body.crm-sidebar-open #crm-sidebar-backdrop {
    display: block;
    opacity: 1;
  }

  /* Mobile hamburger button */
  .crm-mobile-menu-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #2a3244;
    color: #e2e8f0;
    cursor: pointer;
    margin-right: 10px;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
  }

  .crm-mobile-menu-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #3b82f6;
  }
}

@media (min-width: 1024px) {
  .crm-mobile-menu-btn {
    display: none !important;
  }
  #crm-sidebar-backdrop {
    display: none !important;
  }
}

/* ─── 3. Header Bar Responsive Adaptation ────────────────────────────────── */
header {
  min-height: 3.75rem !important;
  height: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
  justify-content: space-between !important;
}

@media (max-width: 639px) {
  header {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    min-height: 3.5rem !important;
  }

  /* Status badge adaptation */
  header div.rounded-full.bg-success\/10 {
    font-size: 11px !important;
    padding: 0.25rem 0.55rem !important;
    max-width: fit-content;
    white-space: nowrap;
  }
}

@media (max-width: 440px) {
  header div.rounded-full.bg-success\/10 {
    font-size: 10px !important;
    padding: 0.2rem 0.45rem !important;
  }
}

/* ─── 4. Main Page Container & Headings ──────────────────────────────────── */
main {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

@media (max-width: 639px) {
  main {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 1rem !important;
    padding-bottom: 2.5rem !important;
  }

  /* Page title headers */
  main h1 {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
  }

  main .mb-6.flex.items-start.justify-between {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
  }

  main .mb-6.flex.items-start.justify-between button {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  main {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    padding-top: 1.25rem !important;
  }
}

/* ─── 5. Grid Systems, Metrics Cards & Form Layouts ──────────────────────── */

/* Promo Codes form (grid-cols-5) -> 1 or 2 columns on mobile/tablet */
@media (max-width: 768px) {
  form.grid.grid-cols-5 {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }

  form.grid.grid-cols-5 > button {
    width: 100% !important;
    height: 2.5rem !important;
    margin-top: 0.25rem !important;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  form.grid.grid-cols-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }

  form.grid.grid-cols-5 > button {
    grid-column: span 2 / span 2 !important;
    height: 2.5rem !important;
  }
}

/* Groups form (grid-cols-4) -> 1 or 2 columns on mobile/tablet */
@media (max-width: 768px) {
  form.grid.grid-cols-4 {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }

  form.grid.grid-cols-4 > .col-span-1 {
    grid-column: span 1 / span 1 !important;
  }

  form.grid.grid-cols-4 > button {
    width: 100% !important;
    height: 2.5rem !important;
    margin-top: 0.25rem !important;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  form.grid.grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }

  form.grid.grid-cols-4 > button {
    grid-column: span 2 / span 2 !important;
    height: 2.5rem !important;
  }
}

/* Database & Schema Overview stat cards (grid-cols-4) */
@media (max-width: 639px) {
  .mb-6.grid.grid-cols-4 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .mb-6.grid.grid-cols-4 > div:last-child {
    margin-top: 0.5rem;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .mb-6.grid.grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }

  .mb-6.grid.grid-cols-4 > div:last-child {
    grid-column: span 2 / span 2 !important;
  }
}

/* Platform Overview 2-column to 4-column cards */
@media (max-width: 540px) {
  .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 541px) and (max-width: 1023px) {
  .grid.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Node details 3-column configuration layout */
@media (max-width: 1023px) {
  .grid.grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  .grid.grid-cols-3 > .col-span-2 {
    grid-column: span 1 / span 1 !important;
  }
}

/* Standard Form 2-column grid */
@media (max-width: 639px) {
  form .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  form .grid.grid-cols-2 > .col-span-2 {
    grid-column: span 1 / span 1 !important;
  }
}

/* ─── 6. Data Tables & Horizontal Overflow ───────────────────────────────── */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: auto !important;
  display: block !important;
}

table {
  width: 100% !important;
  border-collapse: collapse !important;
}

@media (max-width: 768px) {
  table th, table td {
    padding: 8px 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  table td .flex.flex-wrap.gap-1 span {
    font-size: 10px !important;
    padding: 1px 4px !important;
  }
}

/* ─── 7. Radix & Custom Modals & Dialogs ─────────────────────────────────── */
div[role="dialog"] {
  max-width: 95vw !important;
  width: min(700px, 95vw) !important;
  max-height: 90vh !important;
  margin: auto !important;
  box-sizing: border-box !important;
}

@media (max-width: 639px) {
  div[role="dialog"] {
    padding: 1.25rem 1rem !important;
    border-radius: 1rem !important;
    max-height: 92vh !important;
  }
}

/* ─── 8. Tab Navigation & Action Bars ────────────────────────────────────── */
div[role="tablist"] {
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  flex-wrap: nowrap !important;
}

div[role="tablist"]::-webkit-scrollbar {
  display: none !important;
}

div[role="tablist"] button[role="tab"] {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* ─── 9. Input & Touch Targets ───────────────────────────────────────────── */
@media (max-width: 768px) {
  button, a, input, select, textarea {
    touch-action: manipulation;
  }
  
  input, select, textarea {
    font-size: 14px !important;
    min-height: 38px !important;
  }

  button {
    min-height: 36px;
  }
}

/* ─── 10. Module Schema Cards & Status Badges (Mobile Adaptation) ────────── */
/* Target card headers such as in Database & Schema, Node schemas, Platform Health */
@media (max-width: 639px) {
  /* Prevent horizontal card overflow and allow wrapping of card header content */
  .rounded-xl > .flex.items-start.justify-between,
  .rounded-xl > .flex.items-center.justify-between,
  .cursor-pointer.flex.items-start.justify-between,
  div[class*="items-start justify-between"][class*="p-5"],
  div[class*="items-start justify-between"][class*="p-4"] {
    flex-wrap: wrap !important;
    gap: 0.65rem !important;
    padding: 0.875rem 1rem !important;
  }

  /* Title & info container on the left of card header */
  .rounded-xl > .flex.items-start.justify-between > .flex.items-center.gap-3,
  .cursor-pointer > .flex.items-center.gap-3,
  div[class*="items-start justify-between"] > .flex.items-center.gap-3 {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    align-items: flex-start !important;
  }

  /* Badge container on the right side of card header */
  .rounded-xl > .flex.items-start.justify-between > .flex.items-center.gap-2,
  .cursor-pointer > .flex.items-center.gap-2,
  div[class*="items-start justify-between"] > .flex.items-center.gap-2 {
    flex-shrink: 0 !important;
    margin-left: auto !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }

  /* Status badge badges (e.g., PROVISIONED, NOT PROVISIONED, DEPRECATED, TRIAL, ACTIVE, SUSPENDED) */
  span[class*="rounded-full"][class*="border"],
  span[class*="rounded-md"][class*="border"][class*="text-"],
  span[class*="rounded-md"][class*="border"][class*="font-medium"],
  span[class*="rounded-full"][class*="font-mono"],
  span[class*="rounded-full"][class*="text-xs"] {
    white-space: nowrap !important;
    font-size: 10px !important;
    padding: 0.15rem 0.45rem !important;
    letter-spacing: 0.02em !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Node item list rows (e.g. Recently onboarded nodes, list items) */
  a[class*="items-center justify-between"][href*="/nodes/"],
  a[class*="items-center justify-between"],
  .divide-y > a.flex {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
  }

  /* Left text container in node item row */
  a[class*="items-center justify-between"] > div:first-child,
  .divide-y > a.flex > div:first-child {
    min-width: 0 !important;
    flex: 1 1 140px !important;
  }

  /* Right badge container in node item row */
  a[class*="items-center justify-between"] > div:last-child,
  .divide-y > a.flex > div:last-child {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    flex-wrap: nowrap !important;
    margin-left: auto !important;
  }

  /* Titles inside cards should break words cleanly */
  .rounded-xl h3,
  .rounded-xl .font-semibold,
  .rounded-xl .font-medium,
  a[href*="/nodes/"] p {
    word-break: break-word !important;
  }

  /* Subtitle text with dot separator */
  .rounded-xl .font-mono.text-xs {
    word-break: break-word !important;
    line-height: 1.4 !important;
  }
}

/* Global badge protection to ensure text never wraps awkwardly across letters on any device */
span.rounded-md.border,
span.rounded-full.border {
  white-space: nowrap !important;
  word-break: keep-all !important;
  flex-shrink: 0 !important;
}