*{-webkit-tap-highlight-color:transparent}.action-btn,.badge[role=button],.btn,.btn-ghost,.btn-icon,.btn-primary,.btn-secondary,.card-action,.chip,.close-btn,.context-menu-item,.dropdown-item,.dropdown-trigger,.icon-btn,.list-item-action,.modal-close,.nav-item,.nav-link,.quick-action-btn,.sidebar-item,.sidebar-link,.tab-btn,.tab-item,.table-action,.toast-dismiss,[role=button],button,input[type=button],input[type=reset],input[type=submit],select{min-height:44px;min-width:44px}.btn-icon,.close-btn,.icon-btn,.modal-close,.toast-dismiss{display:inline-flex;align-items:center;justify-content:center;padding:10px}input[type=date],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],select,textarea{min-height:44px}input[type=checkbox],input[type=radio]{width:20px;height:20px;cursor:pointer}.checkbox-label,.radio-label{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;padding:4px 0}@media (max-width:375px){html{font-size:14px}.page-header{padding:12px 16px;gap:8px}.page-header h1,.page-header h2,.page-title{font-size:1.1rem}.card,.info-card,.kpi-card,.summary-card{padding:12px}.modal-container,.modal-dialog{width:100%!important;max-width:100%!important;margin:0!important;border-radius:16px 16px 0 0;position:fixed;bottom:0;left:0;right:0}.sidebar{width:100%!important;max-width:100%}.data-table-container,.table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}.form-grid,.form-group-row,.form-row{grid-template-columns:1fr!important;display:flex;flex-direction:column}.header-actions .btn,.page-actions .btn,.toolbar .btn{font-size:.8rem;padding:10px 12px}.kpi-grid,.quick-actions-grid,.stats-grid{grid-template-columns:repeat(2,1fr)!important;gap:8px}.nav-item .nav-label,.sidebar-item .item-label{font-size:.75rem}.tab-list,.tabs-bar{overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}.tab-list::-webkit-scrollbar,.tabs-bar::-webkit-scrollbar{display:none}.toast,.toast-container{left:8px!important;right:8px!important;max-width:calc(100vw - 16px)}.contact-card-grid,.deal-card-grid{grid-template-columns:1fr!important}}@media (max-width:320px){html{font-size:13px}.card,.kpi-card,.summary-card{padding:10px;border-radius:8px}.app-header,.main-header{padding:8px 12px}.avatar,.user-avatar{width:32px!important;height:32px!important}.col-optional,.table-col-secondary,td.hide-320,th.hide-320{display:none!important}.badge,.chip,.status-badge{font-size:.65rem;padding:2px 6px}.kpi-grid,.quick-actions-grid,.stats-grid{grid-template-columns:1fr!important}.header-row,.sub-header{padding-inline:12px}.form-label,label{font-size:.8rem;margin-bottom:2px}.fab,.floating-action-btn{bottom:16px;right:12px;width:48px;height:48px}}@media (max-width:768px){.list-container,.modal-body,.page-content,.scrollable,.sidebar-content,.table-wrapper{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}body.modal-open{overflow:hidden;position:fixed;width:100%}.list-row,.table-row,tr{touch-action:pan-y}:focus-visible{outline:2px solid var(--color-primary,#6c63ff);outline-offset:2px;border-radius:4px}.btn:active,.list-row:active,.nav-item:active,[role=button]:active,button:active{opacity:.75;transform:scale(.98);transition:opacity .1s,transform .1s}}
/* ★ MOBILE PARITY FIXES (RUB377) ─────────────────────────────────── */

/* EmailPage: full-width panels on mobile (list/detail switch via JS) */
@media (max-width: 768px) {
    .email-page .email-list,
    .email-page .email-detail {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 !important;
    }
    .email-back-btn {
        display: inline-flex !important;
    }
    /* CalendarPage: hide week/month view selectors on very small screens */
    .cal-view-btn[data-view="month"],
    .cal-view-btn[data-view="week"] {
        /* Kept — user can still switch, just defaults to day */
    }
    /* TasksPage: list view preferred on mobile */
    .tasks-view-btn[data-mode="kanban"] {
        /* Kept — user can switch back to kanban */
    }
}

/* EmailPage back button — only shown on mobile via JS, hidden on desktop */
.email-back-btn {
    display: none;
}
@media (max-width: 768px) {
    .email-back-btn {
        display: inline-flex !important;
        margin-bottom: var(--space-3, 12px);
        align-self: flex-start;
    }
}


/* === RUB399 Mobile Fixes === */

/* FIX 1: header-new-btn - hide label span, keep icon only */
@media (max-width:600px){
  .header-new-label{display:none!important}
  .header-new-btn{width:40px!important;min-width:40px!important;padding:0!important;justify-content:center!important}
}

/* FIX 2: Tasks header actions - wrap to new line on mobile */
@media (max-width:768px){
  .tasks-header-actions{flex-wrap:wrap!important;gap:var(--space-2)!important;width:100%}
}

/* FIX 3: Contacts header actions - wrap to new line on mobile */
@media (max-width:768px){
  .contacts-header-actions{flex-wrap:wrap!important;gap:var(--space-2)!important;width:100%}
}

/* FIX 4: Reports context bar - allow wrapping on mobile */
@media (max-width:768px){
  .ctx-action-bar{flex-wrap:wrap!important;gap:var(--space-1-5)!important}
}

/* FIX 5: Settings tabs on mobile - show labels + visible background */
@media (max-width:768px){
  .settings-tabs{background:var(--bg-surface)!important;border:1px solid var(--border-subtle)!important;border-radius:var(--radius-xl)!important;padding:var(--space-1-5)!important;margin-bottom:var(--space-3)!important;flex-direction:row!important;flex-wrap:wrap!important;gap:var(--space-1)!important;position:static!important;overflow-x:auto;scrollbar-width:none}
  .settings-tabs::-webkit-scrollbar{display:none}
  .settings-tab-btn>span:last-child{display:inline!important;font-size:.6875rem!important}
  .settings-tab-btn{padding:var(--space-1-5) var(--space-2)!important;gap:var(--space-1)!important;font-size:.6875rem!important;flex-shrink:0;white-space:nowrap}
}


/* ============================================================
   RUB400 — COMPREHENSIVE MOBILE LAYOUT FIXES
   ============================================================ */

/* ── GLOBAL: Prevent ALL horizontal overflow ───────────────── */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

#page-content,
.app-main-area,
.page-container,
.app-shell {
  overflow-x: hidden;
  max-width: 100%;
}

/* All boxes use border-box (already in core, belt-and-suspenders) */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ── FIX 1: SETTINGS TABS — horizontal scroll + visible labels ─ */
@media (max-width: 768px) {
  /* Settings layout becomes single column */
  .settings-layout {
    grid-template-columns: 1fr !important;
    gap: var(--space-3) !important;
  }

  /* Tab bar: horizontal scroll strip */
  .settings-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: var(--space-1) !important;
    padding: var(--space-1-5) !important;
    padding-bottom: var(--space-2) !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-xl) !important;
    margin-bottom: var(--space-3) !important;
  }
  .settings-tabs::-webkit-scrollbar { display: none !important; }

  /* Each tab: shrink-safe, nowrap, compact */
  .settings-tab-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: var(--space-1-5) var(--space-2-5) !important;
    font-size: var(--text-xs) !important;
    min-height: 36px !important;
    gap: var(--space-1) !important;
    width: auto !important;
  }

  /* Show the text label on mobile */
  .settings-tab-btn > span:last-child {
    display: inline !important;
    font-size: var(--text-xs) !important;
  }

  .settings-tab-btn .material-icons-round {
    font-size: 18px !important;
    flex-shrink: 0 !important;
  }
}

/* Tiny screens: icon-only tabs */
@media (max-width: 375px) {
  .settings-tab-btn > span:last-child {
    display: none !important;
  }
  .settings-tab-btn {
    padding: var(--space-1-5) !important;
    min-width: 40px !important;
    justify-content: center !important;
  }
}

/* ── FIX 2: REPORTS — ctx-action-bar & export buttons ────────── */
@media (max-width: 768px) {
  /* Action bar: allow wrapping */
  .ctx-action-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--space-2) !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Each button in the action bar grows to fill */
  .ctx-action-bar .btn,
  .ctx-action-bar button {
    flex: 1 1 auto !important;
    min-width: 120px !important;
    max-width: 100% !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  /* Separator becomes a full-width line */
  .ctx-action-bar-sep {
    display: none !important;
  }

  /* Reports page header: stack vertically */
  .rpt-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .rpt-two-col {
    grid-template-columns: 1fr !important;
  }

  /* Date filter buttons — wrap */
  .rpt-date-filter {
    flex-wrap: wrap !important;
    gap: var(--space-1) !important;
  }

  /* Section bar stays scrollable */
  .rpt-section-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
  }
  .rpt-section-bar::-webkit-scrollbar { display: none !important; }
}

@media (max-width: 480px) {
  .rpt-kpi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-2) !important;
  }
  .rpt-stat-strip {
    flex-direction: column !important;
  }
  .rpt-card-body {
    padding: var(--space-3) !important;
  }
}

/* ── FIX 3: CONTACTS & TASKS — RTL overflow fix ──────────────── */
@media (max-width: 768px) {
  /* Page container: consistent inline padding */
  .page-container {
    padding: var(--space-3) !important;
    padding-inline: var(--space-3) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Page header: vertical stack, full width */
  .page-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-3) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Contacts header actions */
  .contacts-header-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--space-2) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Tasks header actions */
  .tasks-header-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--space-2) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Toolbar: allow wrapping, no overflow */
  .contacts-toolbar,
  .tasks-toolbar,
  .docs-toolbar,
  .tx-toolbar {
    flex-wrap: wrap !important;
    gap: var(--space-2) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Search wrappers: fill available space, no fixed min-width */
  .tx-search-wrap,
  .contacts-toolbar .tx-search-wrap {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Filter dropdowns: no fixed min-width */
  .contacts-tx-filter,
  .tasks-tx-filter,
  .docs-tx-filter {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Filter bar chips: wrap */
  .filter-bar {
    flex-wrap: wrap !important;
    gap: var(--space-2) !important;
    width: 100% !important;
  }

  /* Transaction filters: wrap */
  .transaction-filters {
    flex-wrap: wrap !important;
    gap: var(--space-1-5) !important;
    width: 100% !important;
  }

  /* View toggle: don't overflow */
  .contacts-view-toggle,
  .docs-view-toggle,
  .tasks-view-toggle {
    flex-shrink: 0 !important;
  }
}

/* ── FIX 4: HEADER — prevent crowding ────────────────────────── */
@media (max-width: 768px) {
  .app-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--space-2) !important;
    padding: var(--space-2) var(--space-3) !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .header-start {
    gap: var(--space-2) !important;
    min-width: 0 !important;
    flex: 1 !important;
    overflow: hidden !important;
  }

  .header-end {
    gap: var(--space-1) !important;
    flex-shrink: 0 !important;
  }

  .header-breadcrumb {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .header-breadcrumb .current {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 120px !important;
  }

  /* Search hidden on mobile (already handled) */
  .header-search {
    display: none !important;
  }
}

/* Compact new button on small screens */
@media (max-width: 600px) {
  .header-new-btn {
    width: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  .header-new-label,
  .header-new-btn > span:not(.material-icons-round) {
    display: none !important;
  }
  .header-action-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
}

/* ── FIX 5: TABLE WRAPPERS — horizontal scroll ────────────────── */
@media (max-width: 768px) {
  .data-table-wrap,
  .table-wrapper,
  .tasks-table,
  .contacts-table,
  .docs-table,
  .tx-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ── FIX 6: TRANSACTION DETAIL — tabs & KPI strip ─────────────── */
@media (max-width: 768px) {
  .txd-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    padding-bottom: 0 !important;
    width: 100% !important;
  }
  .txd-tabs::-webkit-scrollbar { display: none !important; }

  .txd-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: var(--text-xs) !important;
    padding: var(--space-2) var(--space-3) !important;
    min-height: 44px !important;
  }

  .txd-kpi-strip {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    gap: var(--space-2) !important;
    grid-template-columns: none !important;
    display: flex !important;
    width: 100% !important;
  }

  .txd-kpi-strip > * {
    flex-shrink: 0 !important;
    min-width: 130px !important;
    max-width: 180px !important;
  }

  .txd-overview {
    grid-template-columns: 1fr !important;
  }

  .txd-hero-title {
    font-size: var(--text-xl) !important;
    white-space: normal !important;
    max-width: 100% !important;
  }

  .txd-hero-actions {
    flex-wrap: wrap !important;
    gap: var(--space-2) !important;
  }

  .fin-summary-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-2) !important;
  }

  .txd-hero {
    padding: var(--space-4) !important;
  }
}

@media (max-width: 480px) {
  .fin-summary-row {
    grid-template-columns: 1fr !important;
  }
  .txd-kpi-strip > * {
    min-width: 110px !important;
  }
}

/* ── FIX 7: KANBAN — horizontal scroll ───────────────────────── */
@media (max-width: 768px) {
  .kanban-board {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: var(--space-3) !important;
    flex-wrap: nowrap !important;
    padding-bottom: var(--space-2) !important;
    align-items: flex-start !important;
    grid-template-columns: none !important;
  }

  .kanban-column {
    min-width: 260px !important;
    max-width: 300px !important;
    flex-shrink: 0 !important;
  }
}

/* ── FIX 8: DASHBOARD STATS ───────────────────────────────────── */
@media (max-width: 768px) {
  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-3) !important;
  }
}

@media (max-width: 480px) {
  .dashboard-stats {
    grid-template-columns: 1fr !important;
  }
}

/* ── FIX 9: MODALS — full-width on mobile ────────────────────── */
@media (max-width: 768px) {
  .modal-overlay {
    padding: var(--space-2) !important;
    align-items: flex-end !important;
  }

  .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    max-height: 90vh !important;
  }

  .modal-footer {
    flex-wrap: wrap !important;
    gap: var(--space-2) !important;
  }

  .modal-footer .btn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: center !important;
  }
}

/* ── FIX 10: INPUTS & BUTTONS — full-width on mobile ─────────── */
@media (max-width: 768px) {
  /* Prevent zoom on iOS */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Form grids collapse */
  .tx-form-row,
  .tx-form-row-3,
  .tasks-form-row,
  .ob-form-row,
  .ob-form-row-3,
  .fin-edit-row {
    grid-template-columns: 1fr !important;
  }
}

/* ── FIX 11: REMOVE HARDCODED WIDTHS that cause overflow ───── */
@media (max-width: 768px) {
  /* Ensure no child of page-container can overflow it */
  .page-container > * {
    max-width: 100% !important;
  }

  /* Stats bar: scroll instead of overflow */
  .stats-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
  }
  .stats-bar > * {
    flex-shrink: 0 !important;
  }

  /* Docs grid: single column on small screens */
  .docs-grid {
    grid-template-columns: 1fr !important;
  }

  /* Contacts grid: single column on small screens */
  .contacts-grid {
    grid-template-columns: 1fr !important;
  }

  /* DS grids collapse */
  .ds-grid-2,
  .ds-grid-3,
  .ds-grid-4 {
    grid-template-columns: 1fr !important;
  }

  /* Date filter on tasks: wrap properly */
  .tasks-date-filter-wrap {
    flex-wrap: wrap !important;
    width: 100% !important;
  }

  .tasks-date-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ── FIX 12: RTL-SAFE TOAST POSITIONING ─────────────────────── */
@media (max-width: 480px) {
  .toast-container {
    left: var(--space-3) !important;
    right: var(--space-3) !important;
    transform: none !important;
    max-width: calc(100vw - var(--space-6)) !important;
  }
}