/* =============================================================================
   Janus — Responsive Design & Mobile Optimizations
   Supports: Desktop, Tablet (1024px), Mobile (390-768px), Ultra-compact (<380px)
   ============================================================================= */

/* 1. TABLET & SMALL LAPTOPS (<= 1024px) */
@media (max-width: 1024px) {
  .grid-5, .grid-4, .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

/* 2. DESKTOP BASE STATES (> 768px) */
@media (min-width: 769px) {
  .btn-mobile-menu {
    display: none !important;
  }
}

/* 3. MOBILE & SMALL TABLETS (<= 768px) */
@media (max-width: 768px) {

  /* Global Layout & Containment */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .app-container, .main-wrapper, .content-area {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
  }

  .content-area {
    padding: 14px 10px calc(76px + env(safe-area-inset-bottom, 0)) 10px !important;
    overflow-x: hidden !important;
  }

  pre, code, #modal-prompt-content, #dash-prompt-preview {
    max-width: 100% !important;
    overflow-x: auto !important;
    word-break: break-word !important;
    white-space: pre-wrap !important;
  }

  /* Sidebar */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(84vw, 320px) !important;
    z-index: 1000 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6) !important;
    overscroll-behavior: contain !important;
  }

  .sidebar.mobile-open {
    transform: translateX(0) !important;
    box-shadow: 12px 0 36px rgba(0, 0, 0, 0.55) !important;
  }

  .sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(2px) !important;
    z-index: 999 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
  }

  .sidebar-overlay.active {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Topbar */
  .topbar {
    padding: env(safe-area-inset-top, 0) 10px 0 10px !important;
    height: calc(56px + env(safe-area-inset-top, 0)) !important;
    gap: 6px !important;
  }

  .btn-mobile-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: var(--janus-text) !important;
    font-size: 22px !important;
    cursor: pointer !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    margin: 0 4px 0 0 !important;
  }

  .page-title-area {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .page-title {
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(100vw - 190px) !important;
  }

  #view-badge-indicator {
    display: none !important;
  }

  .topbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
  }

  .topbar-actions .btn {
    padding: 6px 8px !important;
    min-height: 34px !important;
    min-width: 34px !important;
    font-size: 13px !important;
  }

  .topbar-actions .btn-text,
  .topbar-actions .btn .btn-text,
  .topbar-actions .btn-label,
  .topbar-actions .btn span:not(.btn-icon):not(:first-child) {
    display: none !important;
  }

  #btn-open-prompt-modal,
  #btn-toggle-notifs {
    padding: 0 !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    border-radius: var(--radius-sm) !important;
  }

  /* Bouton Actualiser en position fixe flottante en bas à droite sur mobile */
  body.agora-active #btn-refresh-all,
  #btn-refresh-all.agora-hidden {
    display: none !important;
  }

  #btn-refresh-all {
    position: fixed !important;
    bottom: calc(20px + env(safe-area-inset-bottom, 0)) !important;
    right: calc(16px + env(safe-area-inset-right, 0)) !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--janus-primary, #6366f1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    z-index: 95 !important;
    cursor: pointer !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background-color 0.2s ease !important;
  }

  #btn-refresh-all:active {
    transform: scale(0.92) !important;
  }

  #btn-refresh-all .btn-text {
    display: none !important;
  }

  #btn-refresh-all .btn-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  /* Topbar User Profile masqué sur mobile — déplacé dans le bas de la barre latérale */
  #topbar-user-profile {
    display: none !important;
  }

  /* Notifications Dropdown */
  .notifs-dropdown-menu {
    position: fixed !important;
    top: calc(56px + env(safe-area-inset-top, 0) + 4px) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    max-height: 75vh !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8) !important;
    z-index: 9999 !important;
  }

  .notifs-dropdown-menu.split-mode {
    width: auto !important;
    left: 8px !important;
    right: 8px !important;
  }

  .notifs-split-container {
    display: none !important;
  }

  .notifs-dropdown-list {
    display: flex !important;
    max-height: 55vh !important;
  }

  .notifs-column-divider {
    display: none !important;
  }

  .notifs-view-toggle-btn {
    display: none !important;
  }

  /* Présence Contextuelle Dropdown (Pleine largeur sur mobile comme les notifs) */
  .presence-flyout {
    position: fixed !important;
    top: calc(56px + env(safe-area-inset-top, 0) + 4px) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8) !important;
    z-index: 9999 !important;
  }

  .presence-avatar-stack {
    display: none !important;
  }

  /* Grids & Cards */
  .grid-5, .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .grid-3, .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .card {
    padding: 14px 12px !important;
    margin-bottom: 14px !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .card-header {
    margin-bottom: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .card-header > .badge {
    flex-shrink: 0 !important;
    width: auto !important;
    font-size: 10px !important;
    padding: 2px 8px !important;
  }

  .card-title {
    font-size: 13.5px !important;
    line-height: 1.3 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    word-break: break-word !important;
  }

  /* Stat Cards */
  .stat-card {
    padding: 12px 10px !important;
    gap: 3px !important;
    border-radius: var(--radius-md) !important;
  }

  .stat-val {
    font-size: 20px !important;
    line-height: 1.1 !important;
  }

  .stat-label {
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .stat-card.clickable::after {
    top: 8px !important;
    right: 8px !important;
    font-size: 11px !important;
  }

  .stat-card .badge {
    font-size: 9px !important;
    padding: 1px 5px !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Projects View Controls */
  #view-projects .card:first-child > div {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  #view-projects .card:first-child > div > div:first-child {
    min-width: 0 !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }

  #view-projects .card:first-child > div > div:first-child > div {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  #view-projects .card:first-child > div > div:last-child {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  #view-projects .card:first-child > div > div:last-child .btn {
    width: 100% !important;
    font-size: 11px !important;
    padding: 6px 8px !important;
    justify-content: center !important;
  }

  #proj-assigned-client-selector {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  #proj-client-actions {
    width: 100% !important;
  }

  #proj-client-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Documents & ADRs List Items on Mobile */
  .doc-adr-card-header {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .doc-adr-card-header > .card-title {
    font-size: 13.5px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  .doc-adr-card-header > .badge {
    flex-shrink: 0 !important;
    width: auto !important;
    font-size: 10px !important;
    padding: 2px 8px !important;
  }

  .project-doc-item, .project-adr-item {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  .doc-item-main, .adr-item-main {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .doc-item-icon, .adr-item-icon {
    font-size: 14px !important;
    line-height: 1.35 !important;
    flex-shrink: 0 !important;
  }

  .doc-item-title, .adr-item-title {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .doc-item-badge, .adr-item-badge {
    flex-shrink: 0 !important;
    font-size: 9.5px !important;
    padding: 2px 6px !important;
    white-space: nowrap !important;
    align-self: flex-start !important;
    margin-top: 1px !important;
  }

  .doc-adr-modal-card {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    margin: 8px !important;
    max-height: 90vh !important;
  }

  .doc-adr-content-box {
    font-size: 11.5px !important;
    padding: 12px !important;
    max-height: 50vh !important;
  }

  .adr-section-card {
    padding: 10px 12px !important;
    gap: 6px !important;
  }

  .adr-section-title {
    font-size: 10.5px !important;
  }

  .adr-section-body {
    font-size: 12px !important;
  }

  /* Kanban Board: Swipeable Carousel */
  .kanban-board {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 10px !important;
    padding-bottom: 8px !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  .kanban-column {
    flex: 0 0 85vw !important;
    max-width: 320px !important;
    min-width: 260px !important;
    scroll-snap-align: center !important;
    max-height: 60vh !important;
  }

  .kanban-card {
    padding: 10px 12px !important;
    gap: 6px !important;
  }

  .kanban-card-title {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }

  .kanban-card-meta {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }

  .kanban-card-meta > div {
    width: 100% !important;
    justify-content: space-between !important;
  }

  /* Todo Items & Lists */
  .todo-item {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    border-radius: var(--radius-md) !important;
  }

  .todo-item input[type="checkbox"] {
    flex-shrink: 0 !important;
    width: 18px !important;
    height: 18px !important;
    margin-top: 2px !important;
  }

  .todo-item .todo-title {
    font-size: 13px !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
  }

  .todo-item > div:last-child {
    margin-top: 6px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* Ideas Hub on Mobile */
  .ideas-hub-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .ideas-hub-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .ideas-hub-title-row .card-title {
    font-size: 13.5px !important;
    flex: 1 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .ideas-hub-title-row #badge-idea-count {
    flex-shrink: 0 !important;
    font-size: 10px !important;
    padding: 2px 8px !important;
  }

  .ideas-hub-controls {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 6px !important;
  }

  .ideas-filter-group {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    gap: 3px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 2px !important;
  }

  .ideas-filter-group .btn {
    flex: 1 1 auto !important;
    padding: 4px 5px !important;
    font-size: 10px !important;
    height: 26px !important;
    text-align: center !important;
    white-space: nowrap !important;
    justify-content: center !important;
  }

  #btn-quick-add-idea {
    width: 100% !important;
    justify-content: center !important;
    height: 32px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-top: 2px !important;
  }

  /* Idea Item on Mobile */
  .idea-item {
    padding: 10px 12px !important;
    gap: 8px !important;
    border-radius: var(--radius-md) !important;
  }

  .idea-title {
    font-size: 13px !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
  }

  .idea-meta-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    align-items: center !important;
    margin-top: 4px !important;
  }

  .idea-controls-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 6px !important;
    margin-top: 4px !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  }

  .idea-status-select {
    width: 100% !important;
    height: 30px !important;
    font-size: 11.5px !important;
    border-radius: var(--radius-sm) !important;
  }

  .idea-actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 6px !important;
  }

  .idea-actions .btn-promote-idea,
  .idea-actions .badge-status-done {
    flex: 1 !important;
    justify-content: center !important;
    text-align: center !important;
    height: 28px !important;
    font-size: 11px !important;
  }

  .idea-actions .btn-icon-only {
    min-width: 32px !important;
    height: 28px !important;
    padding: 0 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* All Todos Modal */
  #modal-all-todos .modal-card {
    width: calc(100vw - 12px) !important;
    max-width: 100% !important;
    margin: 6px !important;
    max-height: calc(100vh - 12px) !important;
  }

  #modal-all-todos .modal-header {
    padding: 10px 12px !important;
  }

  #modal-all-todos .modal-header .card-title {
    font-size: 13px !important;
  }

  #modal-all-todos .modal-body {
    padding: 10px 12px !important;
    max-height: calc(100vh - 220px) !important;
  }

  #modal-all-todos .modal-footer {
    padding: 10px 12px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  #all-todos-proj-filter, #all-todos-prio-filter {
    width: 100% !important;
    min-width: 0 !important;
  }

  #all-todos-status-filter-group {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    overflow-x: auto !important;
  }

  #all-todos-status-filter-group .btn {
    font-size: 10px !important;
    padding: 3px 6px !important;
    flex: 1 1 auto !important;
    text-align: center !important;
  }

  /* Modals Common Rules */
  .modal-overlay {
    padding: 8px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .modal-card {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    margin: 8px auto !important;
    max-height: calc(100dvh - 16px) !important;
    max-height: calc(100vh - 16px) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .modal-card > form {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    height: 100% !important;
  }

  .modal-header {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "title close"
      "actions actions" !important;
    row-gap: 8px !important;
    column-gap: 8px !important;
    padding: 12px 14px !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  .modal-header .card-title,
  .modal-header .modal-title,
  .modal-header h2,
  .modal-header h3 {
    grid-area: title !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow: visible !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .modal-close-btn,
  .modal-header > button.btn-secondary:last-child {
    grid-area: close !important;
    justify-self: end !important;
    align-self: center !important;
    padding: 4px 8px !important;
    min-width: 30px !important;
    height: 28px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .modal-header-actions {
    grid-area: actions !important;
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    padding-bottom: 3px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
  }

  .modal-header-actions .btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 11px !important;
    padding: 4px 8px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .modal-split-layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .modal-split-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .modal-sidebar-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
  }

  .agent-actions-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }

  .agent-actions-bar > div:last-child {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    padding-bottom: 2px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
  }

  .agent-actions-bar .agent-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 11px !important;
  }

  .form-label-with-speech {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }

  .form-label-with-speech .form-label {
    min-width: 0 !important;
    margin-bottom: 0 !important;
  }

  .form-label-with-speech > div:last-child,
  .form-label-with-speech > button:last-child {
    flex-shrink: 0 !important;
  }

  #edit-todo-review-pending-banner,
  #edit-todo-review-rejected-banner,
  #edit-todo-origin-idea-banner,
  #edit-todo-origin-relay-banner,
  #edit-idea-promoted-todo-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  #edit-todo-origin-idea-banner > div:last-child,
  #edit-todo-origin-relay-banner > div:last-child,
  #edit-idea-promoted-todo-banner > div:last-child {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
  }

  .modal-body {
    padding: 12px 14px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .modal-footer {
    padding: 10px 14px !important;
    flex-shrink: 0 !important;
    background: var(--janus-surface) !important;
    border-top: 1px solid var(--janus-border) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: stretch !important;
  }

  .modal-footer .btn {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    width: auto !important;
    min-height: 38px !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .modal-body .grid-2, .modal-body .grid-3, .modal-body .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Form Elements & Inputs */
  .form-group {
    margin-bottom: 12px !important;
  }

  .form-label {
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }

  input[type="text"], input[type="number"], input[type="password"],
  input[type="url"], input[type="email"], input[type="tel"], input[type="date"], input[type="search"],
  select, textarea {
    font-size: 13px !important;
    padding: 8px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* TomSelect & Mentions Autocomplete */
  .ts-control, .ts-wrapper.single.input-active .ts-control {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 7px 12px !important;
    min-height: 36px !important;
  }

  .ts-dropdown {
    width: 100% !important;
    max-width: calc(100vw - 24px) !important;
    z-index: 99999 !important;
  }

  .mention-autocomplete-dropdown {
    left: 4px !important;
    right: 4px !important;
    width: auto !important;
    max-width: calc(100vw - 28px) !important;
    max-height: 45vh !important;
    z-index: 99999 !important;
  }

  /* Tables */
  .table-container {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  table {
    font-size: 11.5px !important;
    width: 100% !important;
  }

  th, td {
    padding: 8px 10px !important;
  }

  #modal-notification-preferences table th,
  #modal-notification-preferences table td {
    padding: 8px 4px !important;
    font-size: 11px !important;
  }

  /* Toasts & PWA */
  .toast-container {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0)) !important;
  }

  .toast {
    font-size: 12px !important;
    padding: 9px 12px !important;
  }

  .pwa-install-banner {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0)) !important;
    max-width: none !important;
    padding: 12px !important;
  }

  .tag-list {
    gap: 5px !important;
  }

  .tag {
    font-size: 10.5px !important;
    padding: 2px 7px !important;
  }

  #prof-global-rules {
    font-size: 11.5px !important;
    min-height: 220px !important;
  }
}

/* 4. ULTRA-COMPACT MOBILE (< 380px) */
@media (max-width: 380px) {
  .topbar {
    padding: env(safe-area-inset-top, 0) 6px 0 6px !important;
  }

  .page-title {
    font-size: 13px !important;
    max-width: 110px !important;
  }

  .topbar-actions {
    gap: 3px !important;
  }

  .topbar-actions .btn {
    padding: 4px 6px !important;
  }

  .card, .stat-card {
    padding: 10px 8px !important;
  }

  .grid-5, .grid-4 {
    grid-template-columns: 1fr !important;
  }

  .stat-val {
    font-size: 18px !important;
  }

  .modal-card {
    margin: 2px !important;
    width: calc(100vw - 6px) !important;
  }

  .sidebar {
    width: 88vw !important;
  }
}

/* 5. REDUCED MOTION PREFERENCE */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .sidebar, .modal-overlay, .notifs-dropdown-menu, .presence-flyout, #btn-refresh-all, .pwa-install-banner {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}