/* Innovative Booking 101JD / v1.14.54
   Shared responsive admin system. Desktop is spacious; mobile is purpose-built. */

body.ib-admin-shell-active {
  --ib-page-max: 1600px;
  --ib-page-pad: clamp(14px, 2vw, 30px);
  --ib-card-radius: 18px;
  --ib-touch: 44px;
  --ib-gap: clamp(12px, 1.4vw, 22px);
}

body.ib-admin-shell-active :is(.dashboard-wrap,.workspace-main,.admin-page-shell,.diagnostics-shell,.social-center-page,.organized-shell,main,.shell-main) {
  width: min(var(--ib-page-max), calc(100% - (var(--ib-page-pad) * 2))) !important;
  max-width: var(--ib-page-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  min-width: 0 !important;
}

body.ib-admin-shell-active :is(.panel,.card,.admin-card,.dashboard-card,.form-card,.tenant-panel,.settings-card,.billing-section,.review-settings-panel) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: break-word;
}

body.ib-admin-shell-active :is(.dashboard-grid,.tenant-dashboard-grid,.crm-grid,.workspace-grid,.split-grid,.settings-grid,.form-grid,.admin-control-grid,.social-center-grid,.social-composer-grid) {
  gap: var(--ib-gap) !important;
  min-width: 0 !important;
}

/* Keep admin copy horizontal and readable. */
body.ib-admin-shell-active :is(h1,h2,h3,h4,h5,p,small,strong,label,legend,button,a,span,td,th,.muted,.helper-text,.description,.badge,.pill) {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

body.ib-admin-shell-active :is(button,.button,.primary,.secondary,.ghost-link,.tenant-primary-button,.tenant-secondary-button,.tenant-danger-button,input,select,textarea) {
  min-height: var(--ib-touch);
}

/* Shared table shell. JS adds this wrapper and labels. */
body.ib-admin-shell-active .ib-responsive-table-shell {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
}
body.ib-admin-shell-active table.ib-responsive-admin-table {
  width: 100%;
  min-width: 760px;
  table-layout: auto;
}
body.ib-admin-shell-active table.ib-responsive-admin-table :is(th,td) {
  min-width: 0;
  vertical-align: top;
}
body.ib-admin-shell-active table.ib-responsive-admin-table .ib-actions-cell {
  white-space: nowrap;
}

/* Desktop: make data-heavy screens use the available workspace. */
@media (min-width: 1200px) {
  body.ib-admin-shell-active :is(.dashboard-wrap,.workspace-main,.admin-page-shell,.diagnostics-shell,.social-center-page,.organized-shell,main,.shell-main) {
    width: min(var(--ib-page-max), calc(100% - 40px)) !important;
  }
  body.ib-admin-shell-active .ib-admin-page-leads { --ib-page-max: 1680px; }
}

/* Tablet: two-column layouts only where there is enough room. */
@media (max-width: 1023px) {
  body.ib-admin-shell-active :is(.dashboard-grid,.tenant-dashboard-grid,.crm-grid,.workspace-grid,.split-grid,.settings-grid,.form-grid,.admin-control-grid,.social-center-grid,.social-composer-grid) {
    grid-template-columns: minmax(0,1fr) !important;
  }
  body.ib-admin-shell-active :is(.panel-head,.section-head,.card-head,.tenant-panel-head,.dashboard-topbar,.crm-topbar) {
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }
}

/* Phone design: cards, stacked forms, short controls, no compressed desktop rows. */
@media (max-width: 760px) {
  body.ib-admin-shell-active {
    --ib-page-pad: 7px;
    --ib-card-radius: 15px;
    --ib-gap: 10px;
  }
  body.ib-admin-shell-active :is(.dashboard-wrap,.workspace-main,.admin-page-shell,.diagnostics-shell,.social-center-page,.organized-shell,main,.shell-main) {
    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
  }
  body.ib-admin-shell-active :is(.panel,.card,.admin-card,.dashboard-card,.form-card,.tenant-panel,.settings-card,.billing-section,.review-settings-panel) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 13px !important;
    border-radius: var(--ib-card-radius) !important;
  }
  body.ib-admin-shell-active :is(.form-row,.field-row,.input-row,.filters-row,.toolbar-row,.button-row,.action-row,.toolbar-actions,.filters-actions,.hero-actions) {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 9px !important;
    width: 100% !important;
  }
  body.ib-admin-shell-active :is(.form-row,.field-row,.input-row,.filters-row,.toolbar-row,.button-row,.action-row,.toolbar-actions,.filters-actions,.hero-actions) > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body.ib-admin-shell-active :is(input,select,textarea) {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important;
  }
  body.ib-admin-shell-active :is(dialog,.modal,.dialog,[role="dialog"]) {
    width: calc(100vw - 14px) !important;
    max-width: calc(100vw - 14px) !important;
    max-height: calc(100dvh - 18px) !important;
    margin: auto !important;
    overflow: auto !important;
  }

  /* Generic admin tables become labeled cards. Complex tables are skipped by JS. */
  body.ib-admin-shell-active .ib-responsive-table-shell {
    overflow: visible !important;
    border-radius: 0;
  }
  body.ib-admin-shell-active table.ib-responsive-admin-table.ib-cardify-mobile {
    min-width: 0 !important;
    display: block !important;
  }
  body.ib-admin-shell-active table.ib-responsive-admin-table.ib-cardify-mobile thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }
  body.ib-admin-shell-active table.ib-responsive-admin-table.ib-cardify-mobile tbody,
  body.ib-admin-shell-active table.ib-responsive-admin-table.ib-cardify-mobile tr,
  body.ib-admin-shell-active table.ib-responsive-admin-table.ib-cardify-mobile td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  body.ib-admin-shell-active table.ib-responsive-admin-table.ib-cardify-mobile tbody {
    display: grid !important;
    gap: 10px !important;
  }
  body.ib-admin-shell-active table.ib-responsive-admin-table.ib-cardify-mobile tr {
    padding: 12px !important;
    border: 1px solid rgba(15,23,42,.10) !important;
    border-radius: 15px !important;
    background: var(--panel, #fff) !important;
    box-shadow: 0 8px 22px rgba(15,23,42,.05);
  }
  body.ib-admin-shell-active table.ib-responsive-admin-table.ib-cardify-mobile td {
    display: grid !important;
    grid-template-columns: minmax(90px,34%) minmax(0,1fr) !important;
    gap: 9px !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(15,23,42,.07) !important;
    text-align: left !important;
  }
  body.ib-admin-shell-active table.ib-responsive-admin-table.ib-cardify-mobile td:last-child { border-bottom: 0 !important; }
  body.ib-admin-shell-active table.ib-responsive-admin-table.ib-cardify-mobile td::before {
    content: attr(data-label);
    color: #64748b;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  body.ib-admin-shell-active table.ib-responsive-admin-table.ib-cardify-mobile td[data-label=""],
  body.ib-admin-shell-active table.ib-responsive-admin-table.ib-cardify-mobile td.ib-checkbox-cell {
    grid-template-columns: minmax(0,1fr) !important;
  }
  body.ib-admin-shell-active table.ib-responsive-admin-table.ib-cardify-mobile td[data-label=""]::before,
  body.ib-admin-shell-active table.ib-responsive-admin-table.ib-cardify-mobile td.ib-checkbox-cell::before { display:none; }
  body.ib-admin-shell-active table.ib-responsive-admin-table.ib-cardify-mobile td.ib-actions-cell {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
    white-space: normal !important;
  }
  body.ib-admin-shell-active table.ib-responsive-admin-table.ib-cardify-mobile td.ib-actions-cell::before {
    grid-column: 1 / -1;
  }
  body.ib-admin-shell-active table.ib-responsive-admin-table.ib-cardify-mobile td.ib-actions-cell :is(a,button,summary) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    justify-content: center !important;
  }

  /* Page intro becomes compact after first visit or on explicitly dense pages. */
  body.ib-admin-shell-active .ib-mobile-compact-intro {
    padding-block: 10px !important;
  }
  body.ib-admin-shell-active .ib-mobile-compact-intro > :is(p,.description,.muted) {
    display: none !important;
  }

  /* Status/metric tile collections become usable two-column grids. */
  body.ib-admin-shell-active :is(.crm-status-grid,.lead-stat-grid,.crm-metric-grid,.metric-grid,.stats-grid) {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    overflow: visible !important;
  }
  body.ib-admin-shell-active :is(.crm-status-grid,.lead-stat-grid,.crm-metric-grid,.metric-grid,.stats-grid) > * {
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 380px) {
  body.ib-admin-shell-active :is(.crm-status-grid,.lead-stat-grid,.crm-metric-grid,.metric-grid,.stats-grid) {
    grid-template-columns: minmax(0,1fr) !important;
  }
  body.ib-admin-shell-active table.ib-responsive-admin-table.ib-cardify-mobile td {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 3px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ib-admin-shell-active *, body.ib-admin-shell-active *::before, body.ib-admin-shell-active *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}
body.ib-admin-shell-active .ib-runtime-overflow-warning { outline: 3px solid #dc2626 !important; outline-offset: -3px !important; }