/*
 * FIXHUB CRM MOBILE V3
 * Responsive frontend layer only.
 * Backend/API/business logic untouched.
 */

/* =========================================================
   GLOBAL MOBILE FOUNDATION
   ========================================================= */

@media (max-width: 860px) {

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    min-width: 0 !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  #appRoot,
  .app,
  .app-shell,
  .shell,
  .main,
  main,
  .main-content,
  .content,
  .page,
  .page-content,
  .content-area {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .main,
  main,
  .main-content,
  .content,
  .page-content,
  .content-area {
    margin-left: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
  }

  img,
  video,
  canvas,
  svg {
    max-width: 100%;
  }

  /* =======================================================
     SIDEBAR / MOBILE MENU
     ======================================================= */

  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;

    width: min(88vw, 340px) !important;
    max-width: 340px !important;
    height: 100dvh !important;

    margin: 0 !important;

    padding-top: max(64px, calc(env(safe-area-inset-top) + 56px)) !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.sidebar-open .sidebar,
  .sidebar.mobile-open,
  .sidebar.open,
  .sidebar.active {
    transform: translateX(0) !important;
  }

  .sidebar nav,
  .sidebar .nav,
  .sidebar .navigation,
  .sidebar .sidebar-nav,
  .sidebar .sidebar-menu,
  .sidebar .nav-list {
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-self: stretch !important;
  }

  .sidebar .nav-item,
  .sidebar [data-page] {
    min-height: 46px !important;
  }

  .sidebar .nav-item {
    display: flex !important;
    align-items: center !important;
  }

  /* =======================================================
     TOP BAR / SEARCH
     ======================================================= */

  .topbar,
  .top-bar,
  .header,
  .page-header,
  .toolbar {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .topbar,
  .top-bar {
    gap: 8px !important;
  }

  .topbar input,
  .top-bar input,
  .search,
  .search-box,
  .global-search {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* =======================================================
     DASHBOARD / CARDS / GRIDS
     ======================================================= */

  .dashboard-grid,
  .stats-grid,
  .cards-grid,
  .card-grid,
  .metrics-grid,
  .kpi-grid,
  .summary-grid,
  .grid,
  .two-column,
  .three-column,
  .four-column {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 12px !important;
  }

  .card,
  .panel,
  .section,
  .widget,
  .stat-card,
  .metric-card,
  .summary-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* =======================================================
     FORMS
     ======================================================= */

  form,
  .form,
  .form-grid,
  .fields-grid,
  .field-grid,
  .form-row,
  .form-fields,
  .filters,
  .filter-row {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .form-grid,
  .fields-grid,
  .field-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .form-row {
    flex-wrap: wrap !important;
  }

  .field,
  .form-field,
  .input-group,
  .control-group {
    width: 100% !important;
    min-width: 0 !important;
  }

  input,
  select,
  textarea {
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    width: 100% !important;
  }

  textarea {
    min-height: 110px;
  }

  /* =======================================================
     BUTTONS / ACTIONS
     ======================================================= */

  button,
  .btn,
  .button,
  [role="button"] {
    min-height: 44px;
    touch-action: manipulation;
  }

  .inline-actions,
  .actions,
  .action-row,
  .toolbar-actions,
  .form-actions,
  .button-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    max-width: 100% !important;
  }

  .inline-actions > *,
  .actions > *,
  .action-row > *,
  .form-actions > * {
    max-width: 100% !important;
  }

  /* =======================================================
     TABS
     ======================================================= */

  .tabs,
  .tab-list,
  .nav-tabs,
  .coffee-tabs,
  .coffee-nav,
  .coffee-service-tabs {
    display: flex !important;
    width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    flex-wrap: nowrap !important;
    gap: 6px !important;

    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .tabs > *,
  .tab-list > *,
  .nav-tabs > *,
  .coffee-tabs > *,
  .coffee-nav > *,
  .coffee-service-tabs > * {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    white-space: nowrap !important;
  }

  /* =======================================================
     TABLES
     ======================================================= */

  .table-wrapper,
  .table-container,
  .table-wrap,
  .data-table-wrapper,
  .orders-table,
  .products-table,
  .inventory-table {
    width: 100% !important;
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: visible !important;

    -webkit-overflow-scrolling: touch;
  }

  table {
    max-width: none !important;
    width: max-content !important;
    min-width: 680px !important;
  }

  th,
  td {
    white-space: nowrap;
  }

  /* =======================================================
     MODALS / DIALOGS / DRAWERS
     ======================================================= */

  .modal,
  .dialog,
  .popup,
  .overlay-dialog {
    padding: 0 !important;
  }

  .modal-content,
  .modal__content,
  .dialog-content,
  .dialog__content,
  .popup-content {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    max-width: 100vw !important;

    height: 100dvh !important;
    max-height: 100dvh !important;

    margin: 0 !important;

    border-radius: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;

    -webkit-overflow-scrolling: touch;
  }

  /* =======================================================
     COFFEE SERVICE
     ======================================================= */

  .coffee-service,
  .coffee-service-page,
  .coffee-section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .coffee-service-page {
    overflow-x: hidden !important;
  }

  .coffee-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .coffee-price-toolbar {
    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    gap: 8px !important;
  }

  .coffee-price-toolbar > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .coffee-service .card,
  .coffee-service-page .card,
  .coffee-section .card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .coffee-service .grid,
  .coffee-service-page .grid,
  .coffee-section .grid,
  .coffee-service [class*="grid"],
  .coffee-service-page [class*="grid"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .coffee-service .inline-actions,
  .coffee-service-page .inline-actions,
  .coffee-section .inline-actions {
    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .coffee-service .inline-actions > *,
  .coffee-service-page .inline-actions > *,
  .coffee-section .inline-actions > * {
    width: 100% !important;
  }

  .coffee-service form,
  .coffee-service-page form,
  .coffee-section form {
    width: 100% !important;
    max-width: 100% !important;
  }

  .coffee-service table,
  .coffee-service-page table,
  .coffee-section table {
    min-width: 700px !important;
  }

  /* статуси ремонту / action chips */
  .coffee-service [class*="status"],
  .coffee-service-page [class*="status"] {
    max-width: 100% !important;
  }

  /* фото */
  .coffee-service img,
  .coffee-service-page img,
  .coffee-section img {
    height: auto;
    object-fit: cover;
  }

  /* =======================================================
     FILE / PHOTO INPUTS
     ======================================================= */

  input[type="file"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* =======================================================
     LONG TEXT
     ======================================================= */

  .card,
  .panel,
  .section,
  .modal-content,
  .dialog-content,
  .coffee-service,
  .coffee-section {
    overflow-wrap: anywhere;
  }

  /* =======================================================
     PREVENT OLD DESKTOP CONSTRAINTS
     ======================================================= */

  .content *,
  .main-content *,
  .page-content * {
    max-width: 100%;
  }

  .content table,
  .main-content table,
  .page-content table {
    max-width: none;
  }
}

/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 430px) {

  .main,
  main,
  .main-content,
  .content,
  .page-content,
  .content-area {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .card,
  .panel,
  .section,
  .widget {
    border-radius: 14px !important;
  }

  h1 {
    font-size: clamp(24px, 8vw, 32px) !important;
  }

  h2 {
    font-size: clamp(20px, 6vw, 26px) !important;
  }

  h3 {
    font-size: clamp(17px, 5vw, 22px) !important;
  }

  .coffee-tabs,
  .coffee-nav,
  .coffee-service-tabs {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* FIXHUB_MOBILE_V3_END */


/* =========================================================
   FIXHUB_MOBILE_FUNCTIONAL_V3_CSS
   ========================================================= */

@media (max-width: 860px) {

  /* ---------- MOBILE SIDEBAR ---------- */

  .sidebar {
    justify-content: flex-start !important;
  }

  .sidebar > *,
  .sidebar nav,
  .sidebar .nav,
  .sidebar .navigation,
  .sidebar .sidebar-nav,
  .sidebar .sidebar-menu {
    flex-shrink: 0;
  }

  .sidebar nav,
  .sidebar .nav,
  .sidebar .navigation,
  .sidebar .sidebar-nav,
  .sidebar .sidebar-menu {
    order: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .sidebar [data-page],
  .mobile-bottom-nav [data-page],
  .mobile-more-sheet [data-page] {
    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: manipulation;
  }

  .sidebar .nav-item {
    width: 100% !important;
    min-height: 48px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* ---------- MOBILE CONTENT ---------- */

  .fixhub-mobile-scroll,
  .fixhub-mobile-table-scroll {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: visible !important;

    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .fixhub-mobile-table-scroll > table {
    margin: 0 !important;
  }

  /* ---------- COFFEE SERVICE ---------- */

  .coffee-service.fixhub-mobile-functional,
  .coffee-service-page.fixhub-mobile-functional,
  .coffee-section.fixhub-mobile-functional {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .coffee-tabs,
  .coffee-nav,
  .coffee-service-tabs {
    position: relative !important;
    top: auto !important;

    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;
    flex-wrap: nowrap !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    gap: 6px !important;

    padding: 4px 0 8px !important;
    margin: 0 0 10px !important;

    -webkit-overflow-scrolling: touch;
  }

  .coffee-tabs > *,
  .coffee-nav > *,
  .coffee-service-tabs > * {
    flex: 0 0 auto !important;
    min-height: 42px !important;
    white-space: nowrap !important;
  }

  .coffee-field {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 5px !important;
  }

  .coffee-field > span,
  .coffee-field > label {
    width: 100% !important;
    white-space: normal !important;
  }

  .coffee-field > strong {
    width: 100% !important;
    text-align: left !important;

    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .coffee-field input,
  .coffee-field select,
  .coffee-field textarea {
    width: 100% !important;
    max-width: 100% !important;

    min-height: 46px !important;

    font-size: 16px !important;
  }

  .coffee-form-actions {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;

    gap: 8px !important;

    margin-top: 14px !important;
  }

  .coffee-form-actions > button,
  .coffee-form-actions > .btn,
  .coffee-primary {
    width: 100% !important;
    max-width: 100% !important;

    min-height: 48px !important;

    white-space: normal !important;
  }

  .coffee-price-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;

    width: 100% !important;
    gap: 8px !important;
  }

  .coffee-price-toolbar > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  .coffee-service [class*="card"],
  .coffee-service-page [class*="card"],
  .coffee-section [class*="card"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .coffee-service [class*="grid"],
  .coffee-service-page [class*="grid"],
  .coffee-section [class*="grid"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /*
   * Desktop service tables remain tables, but scrolling is
   * constrained to the table itself instead of the entire CRM.
   */
  .coffee-service table,
  .coffee-service-page table,
  .coffee-section table {
    min-width: 680px !important;
    width: max-content !important;
  }

  /* ---------- MODALS ---------- */

  .coffee-service .modal-content,
  .coffee-service-page .modal-content,
  .coffee-service .dialog-content,
  .coffee-service-page .dialog-content,
  .coffee-service [class*="modal__content"],
  .coffee-service-page [class*="modal__content"] {
    width: 100vw !important;
    max-width: 100vw !important;

    height: 100dvh !important;
    max-height: 100dvh !important;

    margin: 0 !important;
    border-radius: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding-bottom:
      calc(24px + env(safe-area-inset-bottom)) !important;
  }

  /* ---------- PHOTOS ---------- */

  .coffee-service input[type="file"],
  .coffee-service-page input[type="file"] {
    width: 100% !important;
  }

  .coffee-service img,
  .coffee-service-page img {
    max-width: 100% !important;
    height: auto;
  }

  /* ---------- LONG VALUES / STATUS TEXT ---------- */

  .coffee-service [class*="status"],
  .coffee-service-page [class*="status"],
  .coffee-service [class*="note"],
  .coffee-service-page [class*="note"] {
    max-width: 100% !important;

    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 430px) {

  .coffee-form-actions > button,
  .coffee-primary {
    font-size: 15px !important;
  }

  .sidebar {
    width: min(92vw, 330px) !important;
  }
}

/* FIXHUB_MOBILE_FUNCTIONAL_V3_CSS_END */