/* Engintel CRM — desktop SPA legibility overrides for constrained screens. */

/* WeCom's desktop workbench keeps the CRM sidebar visible, leaving a much
   narrower content pane than the browser width suggests. The lead table's
   action column already uses Naive UI's fixed-right behaviour; reinforce it
   at this specific width so the existing action menu (including Delete) stays
   available without scrolling horizontally. */
@media (min-width: 769px) and (max-width: 1180px) {
  .crm-clue-table .n-data-table-th--fixed-right,
  .crm-clue-table .n-data-table-td--fixed-right,
  .crm-clue-table th[data-col-key="operation"],
  .crm-clue-table td[data-col-key="operation"] {
    position: sticky !important;
    right: 0 !important;
    z-index: 3 !important;
    background: #fff !important;
    box-shadow: -8px 0 12px rgba(31, 35, 41, 0.08) !important;
  }

  .crm-clue-table th[data-col-key="operation"],
  .crm-clue-table td[data-col-key="operation"] {
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
  }
}

/* Phone-sized screens. */
@media (max-width: 768px) {
  /* ---- global ---- */
  html, body {
    overflow-x: hidden !important;
    font-size: 14px !important;
  }
  /* kill fixed min-widths that force horizontal page scroll */
  [style*="min-width"] {
    min-width: 0 !important;
  }

  /* ---- layout / sidebar ----
     Shrink the left sidebar to an icon rail so the content gets the width. */
  .n-layout .n-layout-sider,
  .n-layout-sider {
    max-width: 64px !important;
    min-width: 64px !important;
    width: 64px !important;
  }
  .n-layout-sider .n-menu .n-menu-item-content,
  .n-layout-sider .n-menu-item-content {
    padding-left: 16px !important;
  }
  /* hide menu labels / extra text in the rail */
  .n-layout-sider .n-menu-item-content-header,
  .n-layout-sider .n-submenu .n-menu-item-content__header,
  .n-layout-sider .n-base-menu-option-content,
  .n-layout-sider .n-menu-item-content > span:not(.n-icon),
  .n-layout-sider .n-text,
  .n-layout-sider .logo-text,
  .n-layout-sider .n-menu-item-content a {
    display: none !important;
  }

  /* ---- top header: hide the horizontal top menu (nav lives in the rail) ---- */
  .crm-top-menu {
    display: none !important;
  }

  /* crm button groups: never clip button text, wrap instead */
  .crm-button-group,
  [class*="justify-between"][class*="flex-nowrap"] {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
  }
  .crm-button-item {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    overflow: visible !important;
  }
  .crm-button-item .n-button {
    max-width: none !important;
  }

  /* ---- top header / toolbar ---- */
  .n-page-header,
  .n-layout-header,
  header {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  /* toolbars wrap instead of overflowing */
  .n-space,
  .n-flex,
  [class*="toolbar"],
  [class*="search-bar"],
  [class*="table-header"] {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
  }
  .n-space {
    column-gap: 8px !important;
  }
  /* long buttons/inputs shrink */
  .n-button {
    max-width: 100%;
  }
  .n-input, .n-select, .n-base-selection, .n-date-picker {
    max-width: 100% !important;
  }

  /* ---- page padding ---- */
  .n-layout-content,
  .n-card__content,
  [class*="page-content"],
  [class*="pageContainer"],
  [class*="page-container"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* ---- data tables: scroll inside their container ---- */
  .n-data-table,
  .n-data-table-wrapper,
  .n-data-table-base-table,
  [class*="table-wrapper"],
  [class*="table-container"] {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .n-data-table .n-data-table-table {
    font-size: 12px !important;
  }
  .n-data-table-th,
  .n-data-table-td {
    padding: 6px 8px !important;
    white-space: nowrap;
  }

  /* ---- modals / drawers / forms ---- */
  .n-modal,
  .n-modal-container .n-card,
  .n-dialog,
  .n-drawer,
  .n-drawer-content {
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
  }
  .n-modal .n-card__content,
  .n-drawer-body {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* form items stack full width */
  .n-form-item {
    display: block !important;
  }
  .n-form-item .n-form-item-label {
    width: auto !important;
    max-width: 100% !important;
    text-align: left !important;
    padding-bottom: 4px !important;
  }
  .n-form-item .n-form-item-blank,
  .n-form-item .n-form-item-feedback-wrapper {
    width: 100% !important;
  }
  .n-form .n-grid,
  .n-grid {
    grid-template-columns: 1fr !important;
  }

  /* ---- readable text ---- */
  .n-data-table, .n-form, .n-descriptions, .n-list, .n-card {
    font-size: 13px !important;
  }
  small, .n-text--small, [class*="caption"] {
    font-size: 12px !important;
  }

  /* workbench analytics title: don't wrap to one char per line */
  .analytics-name {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }
  .analytics-title {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 8px !important;
  }
  .analytics-title > div:last-child {
    flex-wrap: wrap !important;
    min-width: 0 !important;
    width: 100% !important;
    row-gap: 8px !important;
  }
  .analytics-title .n-base-selection,
  .analytics-title .n-select {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  /* ---- login page: the desktop card is min-w 480px, recenter it ---- */
  [class*="min-w-[480px]"] {
    min-width: 0 !important;
    width: 92vw !important;
    max-width: 92vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ---- popovers/menus should stay on-screen ---- */
  .n-popover, .n-dropdown, .v-binder-follower-content {
    max-width: 96vw !important;
  }

  /* ---- data tables: make the first business column visible ----
     Desktop pins selection checkbox (46px) + row number (50px) to the
     left and the 200px operation column to the right; on a phone that
     pinned operation column covers the company-name column entirely.
     Hide the two helper columns, pin the name column at left:0 with a
     smaller width, and shrink the operation column.
     NOTE: naive-ui keeps widths on <col> elements; with the two helper
     columns display:none the remaining columns shift into the col
     slots, so col widths are reassigned explicitly below. */
  .n-data-table th[data-col-key="selection"],
  .n-data-table td[data-col-key="selection"],
  .n-data-table th[data-col-key="__n_selection__"],
  .n-data-table td[data-col-key="__n_selection__"],
  .n-data-table th[data-col-key="drag"],
  .n-data-table td[data-col-key="drag"],
  .n-data-table th[data-col-key="crmTableOrder"],
  .n-data-table td[data-col-key="crmTableOrder"] {
    display: none !important;
  }
  .n-data-table colgroup col:nth-child(1) {
    width: 128px !important; /* becomes the name column after the shift */
  }
  .n-data-table colgroup col:nth-child(n+2) {
    width: 110px !important; /* uniform width for scrolled business columns */
  }
  .n-data-table colgroup col:last-child {
    width: 104px !important; /* pinned operation column */
  }
  .n-data-table th[data-col-key="name"],
  .n-data-table td[data-col-key="name"] {
    left: 0 !important;
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .n-data-table th[data-col-key="operation"],
  .n-data-table td[data-col-key="operation"] {
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
  }
  .n-data-table td[data-col-key="operation"] .crm-button-group {
    flex-wrap: wrap !important;
    row-gap: 4px !important;
  }
  .n-data-table td[data-col-key="operation"] .n-button {
    font-size: 12px !important;
  }

  /* ---- detail pages: the left/right n-split truncates everything at
     phone width (pane-1 is 25% = ~90px). Stack the panes vertically
     and let the page scroll instead. ---- */
  .n-split--horizontal {
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
  }
  .n-split-pane-1,
  .n-split-pane-2 {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }
  [class*="n-split__resize-trigger"],
  .n-split__resize-trigger {
    display: none !important;
  }
  .crm-follow-detail {
    height: auto !important;
    max-height: none !important;
    padding: 12px !important;
  }
  /* detail description grid: give labels room */
  .crm-description-item-label {
    width: auto !important;
    min-width: 72px !important;
    white-space: normal !important;
  }

  /* ---- detail header action bar: buttons must wrap, not clip ----
     The drawer header is a nowrap flex row with overflow:hidden that
     clips the trailing action buttons at phone width. */
  .n-drawer-header__main [class*="justify-between"][class*="overflow-hidden"] {
    flex-wrap: wrap !important;
    overflow: visible !important;
    row-gap: 8px !important;
  }
  .n-drawer-header__main [class*="justify-end"] {
    flex-wrap: wrap !important;
    flex-shrink: 1 !important;
    row-gap: 6px !important;
    justify-content: flex-start !important;
  }
  /* the split's parent clips overflow; after stacking, the follow-up
     pane sits below the fold, so let this container scroll */
  .h-full.w-full.overflow-hidden:has(> .n-split--horizontal) {
    overflow-y: auto !important;
  }
}