/* ═══════════════════════════════════════════════════════════════════════════════
   ASGARD CRM — Mobile Responsive Stylesheet
   Complete rewrite — m-* class naming convention
   Target: max-width 768px
   ═══════════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════════
   GLOBAL — Touch-Friendly Tap Targets (coarse pointers)
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
  a,
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"] {
    touch-action: manipulation;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE STYLES — @media (max-width: 768px)
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ─────────────────────────────────────────────────────────────────────────────
     0. No Hover / Tap Highlight Reset
     ───────────────────────────────────────────────────────────────────────────── */

  * {
    -webkit-tap-highlight-color: transparent;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     1. Hide Desktop Elements
     ───────────────────────────────────────────────────────────────────────────── */

  .sidenav {
    display: none !important;
  }

  .topbar {
    display: none !important;
  }

  .main {
    margin-left: 0;
    width: 100%;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     2. m-app — Application Shell
     ───────────────────────────────────────────────────────────────────────────── */

  .m-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     3. m-header — Sticky Top Header
     ───────────────────────────────────────────────────────────────────────────── */

  .m-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px 16px;
    background: var(--bg1);
    border-bottom: 1px solid var(--brd);
    min-height: calc(52px + env(safe-area-inset-top, 0px));
    z-index: 100;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     4. m-brand — Logo Container
     ───────────────────────────────────────────────────────────────────────────── */

  .m-brand {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(200, 41, 59, 0.25);
    background: linear-gradient(135deg, rgba(200, 41, 59, 0.1), rgba(30, 77, 140, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     5. m-brand img — Logo Image
     ───────────────────────────────────────────────────────────────────────────── */

  .m-brand img {
    width: 28px;
    height: 28px;
    object-fit: contain;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     6. m-title — Page Title
     ───────────────────────────────────────────────────────────────────────────── */

  .m-title {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     7. m-header-actions — Header Action Buttons Group
     ───────────────────────────────────────────────────────────────────────────── */

  .m-header-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     8. m-hdr-btn — Header Action Button
     ───────────────────────────────────────────────────────────────────────────── */

  .m-hdr-btn {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 1px solid var(--brd);
    background: var(--bg2);
    color: var(--t2);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     9. m-content — Scrollable Content Area
     ───────────────────────────────────────────────────────────────────────────── */

  .m-content {
    flex: 1;
    padding: 0;
    padding-bottom: 80px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     10. #layout — Inner Content Padding
     ───────────────────────────────────────────────────────────────────────────── */

  #layout {
    padding: 12px 16px;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     11. m-tabbar — Bottom Tab Navigation
     ───────────────────────────────────────────────────────────────────────────── */

  .m-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: var(--bg2);
    border-top: 1px solid var(--brd);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 100;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     12. m-tab — Individual Tab Item
     ───────────────────────────────────────────────────────────────────────────── */

  .m-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    color: var(--t3);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    padding: 8px 0;
    transition: color 0.15s;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     13. m-tab.active — Active Tab State
     ───────────────────────────────────────────────────────────────────────────── */

  .m-tab.active {
    color: var(--blue-l, #4A90D9);
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     14. m-tab.active::before — Active Indicator Line
     ───────────────────────────────────────────────────────────────────────────── */

  .m-tab.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: var(--blue, #1E4D8C);
    border-radius: 0 0 2px 2px;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     15. m-tab-icon — Tab Icon
     ───────────────────────────────────────────────────────────────────────────── */

  .m-tab-icon {
    font-size: 20px;
    line-height: 1;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     16. m-tab-label — Tab Label Text
     ───────────────────────────────────────────────────────────────────────────── */

  .m-tab-label {
    font-size: 10px;
    font-weight: 600;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     17. m-tab-badge — Notification Badge on Tab
     ───────────────────────────────────────────────────────────────────────────── */

  .m-tab-badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 16px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--red);
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     18. section-label — Section Heading with Line
     ───────────────────────────────────────────────────────────────────────────── */

  .section-label {
    padding: 0 16px 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold, #d4a843);
    opacity: 0.6;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .section-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.3;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     19. KPI — Horizontal Scroll Cards
     ───────────────────────────────────────────────────────────────────────────── */

  .kpi-row,
  .kpi.row {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 0 16px 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .kpi-row::-webkit-scrollbar,
  .kpi.row::-webkit-scrollbar {
    display: none;
  }

  .kpi-row {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .kpi.row {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .kpi .k {
    flex: 0 0 130px;
    min-width: 130px;
    padding: 12px 14px;
    background: var(--bg2);
    border: 1px solid var(--brd);
    border-radius: 12px;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
  }

  .kpi .k::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
  }

  .kpi .k:nth-child(1)::before {
    background: var(--red, #c8293b);
  }

  .kpi .k:nth-child(2)::before {
    background: var(--blue, #1e4d8c);
  }

  .kpi .k:nth-child(3)::before {
    background: var(--gold, #d4a843);
  }

  .kpi .k:nth-child(4)::before {
    background: var(--green, #2e7d32);
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     20. Tables to Cards — Responsive Table Reflow
     ───────────────────────────────────────────────────────────────────────────── */

  table.asg,
  table.tbl {
    display: block;
    width: 100%;
  }

  table.asg thead,
  table.tbl thead {
    display: none;
  }

  table.asg tbody,
  table.tbl tbody {
    display: flex;
    flex-direction: column;
  }

  table.asg tr,
  table.tbl tr {
    display: flex;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--brd);
  }

  table.asg td,
  table.tbl td {
    padding: 0;
    font-size: 13px;
    border: none;
  }

  table.asg td:first-child,
  table.tbl td:first-child {
    width: 100%;
    font-weight: 600;
    font-size: 14px;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     21. Cards / Panels
     ───────────────────────────────────────────────────────────────────────────── */

  .card,
  .panel {
    margin: 0 16px 10px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--bg2);
    border: 1px solid var(--brd);
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     22. Modals — Fullscreen on Mobile
     ───────────────────────────────────────────────────────────────────────────── */

  .modal {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .modal-content {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
  }

  .modal-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #c8293b, #d4a843, #1e4d8c);
    z-index: 1;
  }

  .mh,
  .modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .mc,
  .modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mf,
  .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
  }

  .mf .btn,
  .modal-footer .btn {
    flex: 1;
    height: 44px;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     23. Forms — Touch-Optimized Inputs
     ───────────────────────────────────────────────────────────────────────────── */

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  select {
    height: 44px;
    padding: 0 14px;
    font-size: 16px !important;
    border-radius: 10px;
    width: 100%;
    box-sizing: border-box;
  }

  textarea {
    height: auto;
    min-height: 100px;
    padding: 10px 14px;
    font-size: 16px !important;
    border-radius: 10px;
    width: 100%;
    box-sizing: border-box;
  }

  .btn {
    min-height: 44px;
    font-size: 14px;
    border-radius: 10px;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     24. m-fab — Floating Action Button
     ───────────────────────────────────────────────────────────────────────────── */

  .m-fab {
    position: fixed;
    bottom: 80px;
    right: 16px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c8293b, #1e4d8c);
    color: #ffffff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 50;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    border: none;
    outline: none;
    transition: transform 0.12s;
  }

  .m-fab:active {
    transform: scale(0.92);
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     25. Filter Chips — Horizontal Scroll Filters
     ───────────────────────────────────────────────────────────────────────────── */

  .filter-bar {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .filter-bar::-webkit-scrollbar {
    display: none;
  }

  .filter-bar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .chip {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--brd);
    background: var(--bg2);
    font-size: 12px;
    font-weight: 600;
    color: var(--t2);
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
  }

  .chip.active {
    background: var(--blue, #1e4d8c);
    border-color: var(--blue, #1e4d8c);
    color: #ffffff;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     26. Status Badges
     ───────────────────────────────────────────────────────────────────────────── */

  .status-new {
    background: var(--blue-bg, rgba(30, 77, 140, 0.15));
    color: var(--blue-l, #4A90D9);
  }

  .status-success {
    background: var(--green-bg, rgba(46, 125, 50, 0.15));
    color: var(--green-l, #66bb6a);
  }

  .status-danger {
    background: var(--red-bg, rgba(200, 41, 59, 0.15));
    color: var(--red-l, #ef5350);
  }

  .status-gold {
    background: var(--gold-bg, rgba(212, 168, 67, 0.15));
    color: var(--gold, #d4a843);
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     27. Rune Divider
     ───────────────────────────────────────────────────────────────────────────── */

  .rune-divider {
    text-align: center;
    padding: 6px 0;
    color: var(--gold, #d4a843);
    font-size: 10px;
    letter-spacing: 0.4em;
    opacity: 0.3;
    user-select: none;
    -webkit-user-select: none;
  }

  .rune-divider::before {
    content: "\16B1 \25C6 \16A8 \25C6 \16B7";
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     28. Toast Notifications
     ───────────────────────────────────────────────────────────────────────────── */

  .toast-container {
    bottom: 80px;
    top: auto;
    left: 16px;
    right: 16px;
  }

  .toast {
    border-radius: 10px;
    border-left: 3px solid transparent;
  }

  .toast.toast-success {
    border-left-color: var(--green, #2e7d32);
  }

  .toast.toast-error {
    border-left-color: var(--red, #c8293b);
  }

  .toast.toast-warning {
    border-left-color: var(--gold, #d4a843);
  }

  .toast.toast-info {
    border-left-color: var(--blue, #1e4d8c);
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     29. Drawer / Slide-over — Fullscreen on Mobile
     ───────────────────────────────────────────────────────────────────────────── */

  .drawer,
  .slide-over {
    width: 100% !important;
    max-width: 100% !important;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     30. Kanban Board — Vertical Stack
     ───────────────────────────────────────────────────────────────────────────── */

  .kanban-board {
    flex-direction: column;
  }

  .kanban-col {
    width: 100%;
    min-width: 100%;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     31. Chat Slide-over
     ───────────────────────────────────────────────────────────────────────────── */

  /* --- Chat: Telegram-style mobile layout --- */
  .chat-container {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    height: calc(100vh - 140px) !important;
    height: calc(100dvh - 140px) !important;
    border-radius: 0 !important;
    border: none !important;
  }

  .chat-sidebar {
    width: 100% !important;
    flex: 1 !important;
    min-height: 0 !important;
    border-right: none !important;
  }

  .chat-sidebar.chat-hidden-mobile {
    display: none !important;
  }

  .chat-main {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1100 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    display: none;
    flex-direction: column;
    background: var(--bg1, #1a1a2e) !important;
    overflow: hidden !important;
  }

  .chat-main.chat-visible-mobile {
    display: flex !important;
  }

  /* Back button visible on mobile */
  .chat-back-btn {
    display: flex !important;
  }

  /* Header with safe area */
  .chat-header {
    padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
  }

  /* Messages area - proper flex, touch scroll */
  .chat-main .chat-messages {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 12px !important;
  }

  /* Input area — fixed at bottom with safe area */
  .chat-main .chat-input-area {
    flex-shrink: 0 !important;
    padding: 8px 10px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 16px)) !important;
  }

  /* Input text — 16px to prevent iOS zoom */
  .chat-input {
    font-size: 16px !important;
    border-radius: 20px !important;
    padding: 10px 16px !important;
  }

  /* Buttons — larger touch targets */
  .chat-send-btn,
  .chat-emoji-btn,
  .chat-attach-btn {
    width: 42px !important;
    height: 42px !important;
  }

  /* Message bubbles wider on mobile */
  .chat-message {
    max-width: 85% !important;
  }

  /* Action buttons always visible on mobile (no hover) */
  .chat-message .chat-msg-actions {
    display: flex !important;
    position: static !important;
    margin-top: 4px !important;
  }

  /* Sidebar header */
  .chat-sidebar-header {
    padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
  }

  /* Search bar */
  .chat-search-input {
    font-size: 16px !important;
  }

  /* Chat item — larger touch target */
  .chat-item {
    padding: 12px 16px !important;
  }

  /* Welcome screen */
  .chat-welcome-icon {
    font-size: 48px !important;
  }
  .chat-welcome-title {
    font-size: 18px !important;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     32. Mailbox — Same Pattern as Chat
     ───────────────────────────────────────────────────────────────────────────── */

  .mailbox-sidebar {
    width: 100%;
    position: relative;
  }

  .mailbox-main {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    width: 100%;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  .mailbox-main.open {
    transform: translateX(0);
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     33. Mono / Tabular Numbers
     ───────────────────────────────────────────────────────────────────────────── */

  .kpi .v,
  .stat-value,
  td.num,
  td.mono {
    font-family: var(--ff-mono);
    font-variant-numeric: tabular-nums;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     35. Mimir AI Widget — Fullscreen on Mobile
     ───────────────────────────────────────────────────────────────────────────── */

  .mimir-widget:not(.mimir-mobile-open) {
    display: none !important;
  }

  .mimir-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: var(--bg1);
    display: flex;
    flex-direction: column;
  }

  .mimir-fullscreen .mimir-messages {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px;
  }

  .mimir-fullscreen .mimir-input-area {
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--brd);
    background: var(--bg2);
    display: flex;
    align-items: flex-end;
    gap: 8px;
  }

  .mimir-fullscreen .mimir-input-area textarea {
    flex: 1;
    min-height: 40px;
    max-height: 120px;
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 16px !important;
    resize: none;
    border: 1px solid var(--brd);
    background: var(--bg1);
    color: var(--t1);
    outline: none;
    box-sizing: border-box;
  }

  .mimir-fullscreen .mimir-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--blue, #1e4d8c);
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }

  .mimir-fullscreen .mimir-attach-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg3);
    color: var(--t2);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     36. More Page — User Card & Layout
     ───────────────────────────────────────────────────────────────────────────── */

  .m-more-page {
    padding: 16px;
  }

  .m-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg2);
    border-radius: 12px;
    border: 1px solid var(--brd);
    margin-bottom: 20px;
  }

  .m-user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--blue-bg, rgba(30, 77, 140, 0.15));
    color: var(--blue-l, #4A90D9);
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .m-user-info {
    flex: 1;
    min-width: 0;
  }

  .m-user-name {
    font-size: 15px;
    font-weight: 700;
  }

  .m-user-role {
    font-size: 12px;
    color: var(--t3);
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     37. m-menu-section — Menu Grouping
     ───────────────────────────────────────────────────────────────────────────── */

  .m-menu-section {
    margin-bottom: 16px;
  }

  .m-menu-section-title {
    padding: 0 4px 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold, #d4a843);
    opacity: 0.6;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     38. m-menu-list — Menu List Container & Items
     ───────────────────────────────────────────────────────────────────────────── */

  .m-menu-list {
    background: var(--bg2);
    border-radius: 12px;
    border: 1px solid var(--brd);
    overflow: hidden;
  }

  .m-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--brd);
    text-decoration: none;
    color: var(--t1);
  }

  .m-menu-item:last-child {
    border-bottom: none;
  }

  .m-menu-icon {
    font-size: 20px;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
  }

  .m-menu-label {
    flex: 1;
    font-size: 14px;
  }

  .m-menu-arrow {
    color: var(--t3);
    font-size: 14px;
    flex-shrink: 0;
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     39. m-menu-item:active — Pressed State
     ───────────────────────────────────────────────────────────────────────────── */

  .m-menu-item:active {
    background: var(--bg3);
  }


  /* ─────────────────────────────────────────────────────────────────────────────
     40. Light Theme Overrides
     ───────────────────────────────────────────────────────────────────────────── */

  html[data-theme="light"] .m-header {
    background: #ffffff;
  }

  html[data-theme="light"] .m-tabbar {
    background: #ffffff;
  }

  html[data-theme="light"] .m-tab.active {
    color: var(--blue);
  }

  html[data-theme="light"] .m-tab.active::before {
    background: var(--blue);
  }

  html[data-theme="light"] .m-menu-list {
    background: #ffffff;
  }

  html[data-theme="light"] .m-user-card {
    background: #ffffff;
  }

} /* END @media (max-width: 768px) */

/* === HORIZONTAL SCROLL PREVENTION === */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* === MODAL SAFE AREA (notch/Dynamic Island) === */
@media (max-width: 768px) {
  .modal,
  .modal-content {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* === FIX: Bottom nav consistent height with padding === */
@media (max-width: 768px) {
  .asg-content,
  #layout,
  .main,
  .asg-main-wrap {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 16px)) !important;
  }
}

/* === FIX: KPI cards responsive at very small screens === */
@media (max-width: 374px) {
  .kpi .k,
  .kpi-card {
    flex: 0 0 calc(50% - 8px) !important;
    min-width: calc(50% - 8px) !important;
  }
}

/* === FIX: Page title truncation on small screens === */
@media (max-width: 374px) {
  .m-title {
    font-size: 14px !important;
  }
}

/* === FIX: Funnel columns responsive scroll snap === */
@media (max-width: 768px) {
  .funnel-board {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .funnel-column {
    scroll-snap-align: start;
  }
}

/* === FIX: prefers-reduced-motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === MIMIR CENTER TAB BUTTON === */
.m-tab-mimir {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
}

.m-tab-mimir .m-tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -14px auto 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue, #1E4D8C), var(--gold, #D4A843));
  box-shadow: 0 2px 12px rgba(30, 77, 140, 0.4);
  font-size: 22px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.m-tab-mimir:active .m-tab-icon {
  transform: scale(0.9);
}

.m-tab-mimir .m-tab-label {
  font-size: 10px;
  margin-top: 2px;
  color: var(--gold, #D4A843);
}

/* === MIMIR MOBILE FULLSCREEN — Telegram-style messenger === */
.mimir-widget.mimir-mobile-open {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1200 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
}

.mimir-widget.mimir-mobile-open .mimir-panel {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  background: linear-gradient(180deg, var(--bg2, #1a1a2e) 0%, #0d1428 100%) !important;
}

.mimir-widget.mimir-mobile-open .mimir-toggle {
  display: none !important;
}

/* --- Mobile Header --- */
.mimir-widget.mimir-mobile-open .mimir-header {
  padding: 10px 12px !important;
  padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
  min-height: 52px !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

/* Close button shows back arrow on mobile */
.mimir-widget.mimir-mobile-open .mimir-close-btn {
  order: -1 !important;
  width: 36px !important;
  height: 36px !important;
  font-size: 22px !important;
  border-radius: 50% !important;
}
.mimir-widget.mimir-mobile-open .mimir-close-x { display: none !important; }
.mimir-widget.mimir-mobile-open .mimir-back-arrow { display: inline !important; font-size: 20px; }

/* Hide minimize on mobile */
.mimir-widget.mimir-mobile-open .mimir-desktop-only {
  display: none !important;
}

/* Avatar smaller on mobile */
.mimir-widget.mimir-mobile-open .mimir-avatar {
  font-size: 26px !important;
}

.mimir-widget.mimir-mobile-open .mimir-header-title {
  font-size: 15px !important;
}

.mimir-widget.mimir-mobile-open .mimir-header-status {
  font-size: 10px !important;
}

/* --- Messages Area --- */
.mimir-widget.mimir-mobile-open .mimir-messages {
  flex: 1 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 12px 12px !important;
  gap: 8px !important;
}

.mimir-widget.mimir-mobile-open .mimir-message {
  max-width: 88% !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  padding: 10px 14px !important;
  border-radius: 16px !important;
}

.mimir-widget.mimir-mobile-open .mimir-message.user {
  border-bottom-right-radius: 4px !important;
}

.mimir-widget.mimir-mobile-open .mimir-message.assistant {
  border-bottom-left-radius: 4px !important;
}

/* --- Input Area — fixed at bottom, messenger-style --- */
.mimir-widget.mimir-mobile-open .mimir-input-area {
  padding: 8px 10px !important;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 16px)) !important;
  background: rgba(0,0,0,0.3) !important;
  border-top: 1px solid rgba(245,215,142,0.1) !important;
  flex-shrink: 0 !important;
}

.mimir-widget.mimir-mobile-open .mimir-input {
  font-size: 16px !important;
  border-radius: 20px !important;
  padding: 10px 16px !important;
  min-height: 42px !important;
  max-height: 120px !important;
  background: var(--bg1, #1C2130) !important;
}

.mimir-widget.mimir-mobile-open .mimir-send-btn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  font-size: 18px !important;
}

.mimir-widget.mimir-mobile-open .mimir-file-btn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

/* --- Quick bar — horizontal scroll --- */
.mimir-widget.mimir-mobile-open .mimir-quick-bar {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  padding-bottom: 4px !important;
}
.mimir-widget.mimir-mobile-open .mimir-quick-bar::-webkit-scrollbar {
  display: none !important;
}
.mimir-widget.mimir-mobile-open .mimir-quick-btn {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* --- Sidebar — slide overlay on mobile --- */
.mimir-widget.mimir-mobile-open .mimir-sidebar {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 0 !important;
  z-index: 10 !important;
  background: var(--bg2, #1a1a2e) !important;
  transition: width 0.3s ease !important;
}
.mimir-widget.mimir-mobile-open .mimir-sidebar.open {
  width: 80vw !important;
  max-width: 300px !important;
  box-shadow: 4px 0 20px rgba(0,0,0,0.5) !important;
}

/* --- Hide wisdom on mobile --- */
.mimir-widget.mimir-mobile-open .mimir-wisdom {
  display: none !important;
}

/* --- Welcome screen --- */
.mimir-widget.mimir-mobile-open .mimir-welcome {
  padding: 20px 16px !important;
}
.mimir-widget.mimir-mobile-open .mimir-welcome-icon {
  font-size: 48px !important;
}
.mimir-widget.mimir-mobile-open .mimir-welcome h3 {
  font-size: 16px !important;
}

/* --- Suggestions wrap nicely --- */
.mimir-widget.mimir-mobile-open .mimir-suggestions {
  gap: 6px !important;
}
.mimir-widget.mimir-mobile-open .mimir-suggestion {
  font-size: 12px !important;
  padding: 6px 12px !important;
}

/* --- Attachments --- */
.mimir-widget.mimir-mobile-open .mimir-attachments {
  gap: 6px !important;
  margin-bottom: 6px !important;
}

/* --- Code blocks scroll horizontally --- */
.mimir-widget.mimir-mobile-open .mimir-code {
  font-size: 11px !important;
  max-width: calc(100vw - 80px) !important;
  overflow-x: auto !important;
}

/* --- Drag overlay hidden on mobile --- */
.mimir-widget.mimir-mobile-open .mimir-drop-overlay {
  display: none !important;
}

/* --- Copy button always visible on mobile (no hover) --- */
.mimir-widget.mimir-mobile-open .mimir-copy-btn {
  opacity: 0.6 !important;
}

/* === Tablet Chat: narrow sidebar === */
@media (max-width: 1024px) and (min-width: 769px) {
  .chat-container {
    grid-template-columns: 260px 1fr !important;
  }
  .chat-sidebar {
    display: flex !important;
  }
}

/* ══════════════════════════════════════
   TELEPHONY — Responsive
   ══════════════════════════════════════ */

@media (max-width: 768px) {
  #telephony-popup-container {
    top: 8px;
    right: 8px;
    left: 8px;
  }
  .call-popup {
    width: 100%;
  }
  .call-detail-panel {
    width: 100%;
  }
  .telephony-dashboard {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .telephony-kpi-value {
    font-size: 22px;
  }
  .telephony-filters {
    flex-direction: column;
  }
  .telephony-filters select,
  .telephony-filters input {
    width: 100%;
    min-width: unset;
  }
  .call-log-table {
    display: block;
    overflow-x: auto;
  }
  .missed-call-card {
    flex-wrap: wrap;
  }
  .missed-call-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .telephony-tabs {
    flex-wrap: wrap;
  }
  .telephony-tab {
    min-width: calc(50% - 2px);
  }
}

@media (max-width: 480px) {
  .telephony-dashboard {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .telephony-kpi {
    padding: 12px;
  }
  .telephony-kpi-value {
    font-size: 20px;
  }
  .call-popup-actions {
    flex-wrap: wrap;
  }
  .call-popup-btn--accept,
  .call-popup-btn--transfer {
    flex: 1 1 calc(50% - 4px);
  }
  .call-popup-btn--reject {
    flex: 0 0 100%;
  }
}

/* PWA Install Banner */
.pwa-banner {
  position: fixed;
  bottom: 80px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg2);
  border: 1px solid var(--brd);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  z-index: 9998;
  animation: fadeInUp .3s ease both;
}
.pwa-banner span { flex: 1; font-size: 13px; color: var(--t1); }

@media (max-width: 768px) {
  /* Calendar mobile */
  .cal-layout { grid-template-columns: 1fr !important; }
  .cal-sidebar { display: none; }
  .cal-grid { gap: 1px; }
  .cal-cell { min-height: 60px; padding: 4px; font-size: 11px; }
  .cal-event { font-size: 10px; padding: 2px 4px; }

  /* Finances mobile */
  .fin-chart-row { flex-direction: column !important; }
  .fin-pie-wrap { width: 100% !important; max-width: 200px; margin: 0 auto; }
  .fin-legend { min-width: 0 !important; width: 100%; }
  .fin-bar-chart { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* BUH Registry mobile */
  .buh-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Contracts mobile */
  .contract-form-grid { grid-template-columns: 1fr !important; }

  /* Gantt mobile */
  .gantt-header { grid-template-columns: 200px 1fr !important; }
  .gantt-row-label { min-width: 200px; max-width: 200px; font-size: 11px; }


  /* ═══════════════════════════════════════════════════════════════════════════
     ASGARD MOBILE PREMIUM FRAMEWORK v2.0
     Global rules that fix 80% of all pages automatically
     Added: 2026-03-08
     ═══════════════════════════════════════════════════════════════════════════ */

  /* ─── 1. TYPOGRAPHY ─── */
  h1, .h1 { font-size: 20px !important; line-height: 1.3; }
  h2, .h2 { font-size: 18px !important; line-height: 1.3; }
  h3, .h3 { font-size: 16px !important; line-height: 1.4; }
  h4, .h4 { font-size: 14px !important; line-height: 1.4; }
  .topbar h1 { font-size: 16px !important; }

  /* ─── 2. UNIVERSAL CARD STYLING ─── */
  .card, .panel, .dash-card,
  .stat-card, .kpi-card {
    border-radius: 14px !important;
    padding: 14px !important;
    margin-bottom: 10px !important;
  }

  /* ─── 3. LAYOUT & SPACING ─── */
  #layout {
    padding: 12px 12px 80px !important;
  }

  section, .section {
    margin-bottom: 16px;
  }

  /* ─── 4. GRID RESET — Force single column on mobile ─── */
  [style*="grid-template-columns"],
  .dash-grid,
  .form-grid,
  .detail-grid {
    grid-template-columns: 1fr !important;
  }

  /* Exempt: keypad grids, tab bars, etc */
  .sg-keypad,
  .m-tabbar,
  .pk-keypad,
  [class*="keypad"],
  .btn-group-grid {
    grid-template-columns: revert !important;
  }

  /* ─── 5. KPI / STATS — Horizontal scroll carousel ─── */
  .kpi, .kpi-row, .stats-grid, .kpi-grid,
  [class*="stats-row"], [class*="kpi-row"],
  .dash-kpi {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 10px !important;
    padding: 4px 0 12px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .kpi::-webkit-scrollbar, .kpi-row::-webkit-scrollbar,
  .stats-grid::-webkit-scrollbar, .kpi-grid::-webkit-scrollbar,
  [class*="stats-row"]::-webkit-scrollbar,
  .dash-kpi::-webkit-scrollbar { display: none; }

  .kpi > *, .kpi-row > *, .stats-grid > *, .kpi-grid > *,
  [class*="stats-row"] > *, .dash-kpi > * {
    flex: 0 0 150px !important;
    min-width: 150px !important;
    max-width: 170px !important;
    scroll-snap-align: start;
    border-radius: 14px !important;
    padding: 12px !important;
  }

  .stat-value, .kpi-value, .k-val {
    font-size: 22px !important;
    font-weight: 700;
  }

  .stat-label, .kpi-label, .k-label {
    font-size: 11px !important;
    opacity: 0.7;
  }

  /* ─── 6. FORMS — Single column, full width ─── */
  .formrow, .form-row, .field-row,
  [class*="form-grid"], [class*="formgroup"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

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

  input, select, textarea, .input {
    width: 100% !important;
    min-height: 44px;
    font-size: 16px !important; /* Prevent iOS zoom */
    border-radius: 10px !important;
    box-sizing: border-box;
  }

  textarea {
    min-height: 80px;
  }

  /* ─── 7. BUTTONS — Touch-friendly ─── */
  .btn, button, [role="button"] {
    min-height: 44px;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .btn:active, button:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
  }

  /* Button groups — stack or wrap */
  .btn-group, .actions, .form-actions,
  [class*="actions"], .welcome-form-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .btn-group .btn, .actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
  }

  /* ─── 8. FILTER BAR — Horizontal scroll chips ─── */
  .filter-bar, .toolbar, .tools,
  .filter-row, .filter-group,
  .tab-bar, .tabs {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding: 8px 0 !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar, .toolbar::-webkit-scrollbar,
  .tools::-webkit-scrollbar, .tabs::-webkit-scrollbar,
  .filter-row::-webkit-scrollbar { display: none; }

  .filter-bar > *, .toolbar > *, .tools > *,
  .filter-row > *, .filter-group > * {
    flex-shrink: 0 !important;
    white-space: nowrap;
  }

  /* ─── 9. CHARTS & CANVAS — Fit screen ─── */
  canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  .chart-wrap, .chart-container, [class*="chart"] {
    max-width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Chart rows: stack vertically */
  .chart-row, [class*="chart-row"], .dash-chart-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .chart-row > *, [class*="chart-row"] > *, .dash-chart-row > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* ─── 10. TABLES — Premium card view ─── */
  .tbl-wrap, .table-wrap {
    overflow-x: visible !important;
    border: none !important;
  }

  table.tbl, table.asg {
    display: block !important;
    border: none !important;
  }

  table.tbl thead, table.asg thead {
    display: none !important;
  }

  table.tbl tbody, table.asg tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  table.tbl tr, table.asg tr {
    display: flex !important;
    flex-wrap: wrap !important;
    background: var(--bg2, rgba(255,255,255,0.03)) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    border: 1px solid var(--brd, rgba(255,255,255,0.06)) !important;
    gap: 4px 12px !important;
    position: relative;
  }

  table.tbl td, table.asg td {
    display: flex !important;
    flex-direction: column !important;
    border: none !important;
    padding: 2px 0 !important;
    font-size: 13px !important;
    min-width: 0 !important;
    flex: 1 1 calc(50% - 8px);
  }

  /* Data labels from header */
  table.tbl td[data-label]::before,
  table.asg td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 10px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--t3, rgba(255,255,255,0.35));
    margin-bottom: 2px;
  }

  /* First cell is the "title" — make it full width and larger */
  table.tbl tr td:first-child,
  table.asg tr td:first-child {
    flex: 1 1 100% !important;
    font-size: 14px !important;
    font-weight: 600;
    color: var(--t1, #fff);
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--brd, rgba(255,255,255,0.06)) !important;
    margin-bottom: 4px;
  }

  /* Status badges in tables */
  table.tbl .badge, table.asg .badge,
  table.tbl .status, table.asg .status {
    display: inline-block;
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
  }

  /* Action buttons in table rows */
  table.tbl td:last-child .btn,
  table.asg td:last-child .btn {
    min-height: 36px;
    padding: 6px 12px !important;
    font-size: 12px !important;
  }

  /* ─── 11. MODALS — Bottom sheet style on mobile ─── */
  .modalback, .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal, .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    animation: m-slide-up 0.3s ease-out !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal::before, .modal-content::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--t3, rgba(255,255,255,0.2));
    border-radius: 2px;
    margin: 10px auto 6px;
    flex-shrink: 0;
  }

  @keyframes m-slide-up {
    from { transform: translateY(100%); opacity: 0.5; }
    to { transform: translateY(0); opacity: 1; }
  }

  .modal-header, .modal-footer {
    position: sticky;
    z-index: 2;
    padding: 14px 16px !important;
  }
  .modal-header { top: 0; }
  .modal-footer { bottom: 0; }

  .modal-body {
    padding: 12px 16px !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ─── 12. PAGE TRANSITIONS ─── */
  #layout {
    animation: m-page-enter 0.25s ease-out;
  }

  @keyframes m-page-enter {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ─── 13. SKELETON LOADING ─── */
  .m-skeleton {
    background: linear-gradient(90deg,
      var(--bg2, rgba(255,255,255,0.03)) 25%,
      var(--bg3, rgba(255,255,255,0.06)) 50%,
      var(--bg2, rgba(255,255,255,0.03)) 75%
    );
    background-size: 200% 100%;
    animation: m-skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 8px;
  }

  @keyframes m-skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  .m-skeleton-text { height: 14px; margin-bottom: 8px; border-radius: 4px; }
  .m-skeleton-title { height: 22px; width: 60%; margin-bottom: 16px; border-radius: 6px; }
  .m-skeleton-card { height: 80px; border-radius: 14px; margin-bottom: 10px; }
  .m-skeleton-kpi-row {
    display: flex; gap: 10px; overflow: hidden; margin-bottom: 16px;
  }
  .m-skeleton-kpi {
    flex: 0 0 150px; height: 80px; border-radius: 14px;
  }
  .m-skeleton-table-row {
    height: 90px; border-radius: 12px; margin-bottom: 8px;
  }

  /* ─── 14. PULL TO REFRESH INDICATOR ─── */
  .m-ptr-indicator {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg2, rgba(255,255,255,0.06));
    border: 2px solid var(--gold, #d4a843);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: top 0.2s ease, opacity 0.2s ease;
    opacity: 0;
    z-index: 10;
  }

  .m-ptr-indicator.visible {
    opacity: 1;
    top: 12px;
  }

  .m-ptr-indicator.loading {
    animation: m-ptr-spin 0.8s linear infinite;
  }

  @keyframes m-ptr-spin {
    from { transform: translateX(-50%) rotate(0deg); }
    to { transform: translateX(-50%) rotate(360deg); }
  }

  .m-ptr-indicator svg {
    width: 18px;
    height: 18px;
    color: var(--gold, #d4a843);
  }

  /* ─── 15. DETAIL PANELS — Full width stacked ─── */
  .detail-panel, .info-panel, .detail-grid,
  [class*="detail-row"], [class*="info-row"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .detail-panel .label, .detail-panel dt,
  .info-panel .label {
    font-size: 11px !important;
    color: var(--t3, rgba(255,255,255,0.35));
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .detail-panel .value, .detail-panel dd,
  .info-panel .value {
    font-size: 14px !important;
    margin-bottom: 8px;
  }

  /* ─── 16. TWO-PANEL LAYOUTS — Stack vertically ─── */
  .split-view, .dual-panel, .two-col,
  [class*="split"], [class*="two-col"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .split-view > *, .dual-panel > *, .two-col > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* ─── 17. SIDEBAR/DRAWER — Hidden, slide-over ─── */
  .sidenav, .sidebar, .side-panel {
    position: fixed !important;
    top: 0;
    left: -100%;
    width: 85% !important;
    max-width: 320px;
    height: 100% !important;
    z-index: 999;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sidenav.open, .sidebar.open, .side-panel.open {
    left: 0;
  }

  /* ─── 18. TABS — Scrollable horizontal ─── */
  .tab-nav, .tab-list, .nav-tabs {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    border-bottom: 1px solid var(--brd, rgba(255,255,255,0.06));
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tab-nav::-webkit-scrollbar, .tab-list::-webkit-scrollbar,
  .nav-tabs::-webkit-scrollbar { display: none; }

  .tab-nav > *, .tab-list > *, .nav-tabs > * {
    flex-shrink: 0 !important;
    white-space: nowrap;
    padding: 10px 16px !important;
    font-size: 13px !important;
  }

  /* ─── 19. BADGES & TAGS — Compact ─── */
  .badge, .tag, .chip, .label-tag {
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    white-space: nowrap;
  }

  /* ─── 20. EMPTY STATES ─── */
  .empty-state, .no-data {
    padding: 40px 20px !important;
    text-align: center;
  }

  .empty-state .icon, .no-data .icon {
    font-size: 48px !important;
    margin-bottom: 12px;
  }

  /* ─── 21. SCROLL INDICATORS ─── */
  .m-scroll-hint {
    position: relative;
  }

  .m-scroll-hint::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, var(--bg1, #0B0F19));
    pointer-events: none;
    opacity: 0.8;
  }

  /* ─── 22. ACCORDION / COLLAPSIBLE ─── */
  details summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 12px !important;
    font-weight: 600;
    cursor: pointer;
  }

  /* ─── 23. IMAGES & AVATARS ─── */
  img {
    max-width: 100%;
    height: auto;
  }

  .avatar, .user-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50%;
    flex-shrink: 0;
  }

  /* ─── 24. TOAST IMPROVEMENTS ─── */
  .toast-container {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    left: 8px !important;
    right: 8px !important;
  }

  .toast {
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
  }

  /* ─── 25. RESPONSIVE EMBED (iframes, videos) ─── */
  iframe, video, embed {
    max-width: 100% !important;
  }

  /* ─── 26. SECTION HEADERS ─── */
  .section-label, .section-title {
    font-size: 15px !important;
    font-weight: 700;
    padding: 12px 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--brd, rgba(255,255,255,0.06));
  }

  /* ─── 27. PREFERS REDUCED MOTION ─── */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* ─── 28. SAFE AREA PADDING ─── */
  .m-content {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  /* ─── 29. HORIZONTAL SCROLL SHADOW INDICATORS ─── */
  .m-h-scroll {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }
  .m-h-scroll::-webkit-scrollbar { display: none; }
  .m-h-scroll > * { scroll-snap-align: start; }

  /* ─── 30. DASHBOARD SPECIFIC ─── */
  .dash-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .dash-card-row {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .dash-quick {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .dash-quick .btn {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    font-size: 12px !important;
    padding: 10px 8px !important;
    text-align: center !important;
  }

  .dash-alert-item {
    font-size: 13px !important;
  }

  /* ─── 31. TELEPHONY MOBILE ─── */
  .call-detail-panel {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ─── 32. HIDE NON-ESSENTIAL ON MOBILE ─── */
  .hide-mobile, .desktop-only, .d-none-mobile {
    display: none !important;
  }

  /* ─── 33. MORE MENU — Premium cards ─── */
  .more-menu-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    padding: 8px !important;
  }

  .more-menu-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 14px 8px !important;
    border-radius: 14px !important;
    background: var(--bg2, rgba(255,255,255,0.03)) !important;
    border: 1px solid var(--brd, rgba(255,255,255,0.06)) !important;
    text-align: center;
    font-size: 11px !important;
    transition: background 0.15s ease;
  }

  .more-menu-item:active {
    background: var(--bg3, rgba(255,255,255,0.08)) !important;
    transform: scale(0.97);
  }

  .more-menu-item .icon {
    font-size: 22px !important;
    opacity: 0.8;
  }



  /* ═══════════════════════════════════════════════════════════════════════════
     ASGARD MOBILE — PAGE-SPECIFIC OVERRIDES v1.0
     Детальные мобильные адаптации для каждой страницы.
     Работает поверх глобального фреймворка.
     Added: 2026-03-08
     ═══════════════════════════════════════════════════════════════════════════ */

  /* ─────────────────────────────────────────────────────────────
     1. CUSTOM DASHBOARD (#/home) — Зал Ярла
     ───────────────────────────────────────────────────────────── */

  .custom-dash h2 {
    font-size: 18px !important;
    text-align: center;
  }

  .custom-dash .dash-subtitle {
    text-align: center;
    font-size: 10px;
  }

  .custom-dash .dash-rune-divider {
    text-align: center;
    font-size: 10px;
  }

  /* Кнопки управления виджетами — компактнее */
  .custom-dash > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center;
  }

  .custom-dash > div:first-child > div:last-child {
    justify-content: center !important;
  }

  /* Виджеты — убираем drag на мобильном, убираем hover */
  .dash-widget {
    transition: none !important;
  }

  .dash-widget:hover {
    transform: none !important;
  }

  .dash-widget .drag-handle {
    display: none !important;
  }

  .dash-widget .btn-remove {
    min-height: 32px !important;
    min-width: 32px !important;
    padding: 4px !important;
    font-size: 16px !important;
  }

  /* Виджет-контент — плотнее */
  .dash-widget-content {
    padding: 12px !important;
  }

  /* Выбор виджетов — 2 колонки вместо 3 */
  .widget-pick {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ─────────────────────────────────────────────────────────────
     2. DIRECTOR DASHBOARD (#/dashboard)
     ───────────────────────────────────────────────────────────── */

  .dash-header h2 {
    font-size: 18px !important;
    text-align: center;
  }

  .dash-header .dash-period {
    text-align: center;
  }

  /* KPI-карточки — горизонтальный скролл */
  .dash-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 12px !important;
    padding: 4px 0 16px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .dash-grid::-webkit-scrollbar { display: none; }

  .dash-grid > .dash-card {
    flex: 0 0 280px !important;
    min-width: 280px !important;
    scroll-snap-align: start;
  }

  .dash-card-value {
    font-size: 26px !important;
  }

  .dash-card-icon {
    font-size: 36px !important;
    right: 10px !important;
  }

  .dash-card-row .mini-value {
    font-size: 16px !important;
  }

  /* Графики — стек */
  .dash-chart-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .dash-chart-canvas {
    height: 160px !important;
  }

  /* Быстрые действия — 2 колонки */
  .dash-quick {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .dash-quick a, .dash-quick .btn {
    justify-content: center !important;
    text-align: center !important;
    font-size: 12px !important;
    padding: 12px 8px !important;
  }

  /* Секции */
  .dash-section-title {
    font-size: 12px !important;
  }

  /* Алерты */
  .dash-alerts {
    padding: 14px !important;
  }

  .dash-alert-item {
    font-size: 12px !important;
    padding: 8px 0 !important;
  }

  /* ─────────────────────────────────────────────────────────────
     3. FINANCES (#/finances)
     ───────────────────────────────────────────────────────────── */

  .fin-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .fin-tabs {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  .fin-tab {
    padding: 8px 14px !important;
    font-size: 13px !important;
    flex: 1 !important;
    text-align: center !important;
  }

  .fin-year-nav {
    justify-content: center !important;
  }

  .fin-year {
    font-size: 22px !important;
  }

  .fin-summary {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .fin-card-value {
    font-size: 20px !important;
  }

  /* Столбики — горизонтальный скролл */
  .fin-bars {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px !important;
    gap: 4px !important;
  }
  .fin-bars::-webkit-scrollbar { display: none; }

  .fin-bar-wrap {
    min-width: 28px !important;
    flex: 0 0 auto !important;
  }

  .fin-bar {
    max-width: 36px !important;
  }

  /* Значения всегда видны на мобильном (нет hover) */
  .fin-bar-value {
    opacity: 1 !important;
    font-size: 9px !important;
    top: -20px !important;
  }

  /* Пай-чарт — стек вертикально */
  .fin-pie-container {
    flex-direction: column !important;
    align-items: center !important;
  }

  .fin-pie {
    width: 180px !important;
    height: 180px !important;
  }

  .fin-legend {
    min-width: 100% !important;
  }

  .fin-legend-item {
    gap: 8px !important;
  }

  .fin-legend-value {
    font-size: 12px !important;
  }

  /* Кнопка назад */
  .fin-chart-title .back-btn {
    min-height: 36px !important;
    padding: 6px 10px !important;
  }

  /* Контейнер графика */
  .fin-chart-container {
    padding: 14px !important;
  }

  /* ─────────────────────────────────────────────────────────────
     4. CASH / КАССА (#/cash)
     ───────────────────────────────────────────────────────────── */

  .cash-summary, [class*="cash-kpi"],
  .cash-balance-card {
    grid-template-columns: 1fr !important;
  }

  /* Транзакции как карточки */
  .cash-item, .cash-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    background: var(--bg2, rgba(255,255,255,0.03)) !important;
    margin-bottom: 8px !important;
  }

  /* ─────────────────────────────────────────────────────────────
     5. TENDERS (#/tenders, #/pre-tenders)
     ───────────────────────────────────────────────────────────── */

  /* KPI тендеров — карусель */
  .tender-kpi, [class*="tender-stat"],
  .pre-tender-kpi {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tender-kpi > *, .pre-tender-kpi > * {
    flex: 0 0 140px !important;
    scroll-snap-align: start !important;
  }

  /* Фильтры тендеров */
  .tender-filters, .pre-tender-filters {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0 !important;
  }

  .tender-filters > *, .pre-tender-filters > * {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* Детали тендера — стек */
  .tender-detail, .tender-info-grid,
  .pre-tender-detail {
    grid-template-columns: 1fr !important;
  }

  /* ─────────────────────────────────────────────────────────────
     6. PM WORKS (#/pm-works)
     ───────────────────────────────────────────────────────────── */

  .works-kpi, [class*="work-stat"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .works-kpi > * {
    flex: 0 0 140px !important;
    scroll-snap-align: start !important;
  }

  /* Детали работы */
  .work-detail, .work-info-grid {
    grid-template-columns: 1fr !important;
  }

  /* ─────────────────────────────────────────────────────────────
     7. CALCULATOR (#/calculator)
     ───────────────────────────────────────────────────────────── */

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

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

  .kpi3, .kpi4 {
    grid-template-columns: 1fr !important;
  }

  /* Табы калькулятора */
  .calc-tabs, .calc-nav {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }

  /* ─────────────────────────────────────────────────────────────
     8. EQUIPMENT (#/equipment, #/warehouse)
     ───────────────────────────────────────────────────────────── */

  .eq-grid, .eq-catalog, .wh-grid {
    grid-template-columns: 1fr !important;
  }

  .eq-card, .wh-card {
    padding: 14px !important;
    border-radius: 12px !important;
  }

  .eq-detail-grid, .wh-detail-grid {
    grid-template-columns: 1fr !important;
  }

  /* ─────────────────────────────────────────────────────────────
     9. TELEPHONY (#/telephony)
     ───────────────────────────────────────────────────────────── */

  .tel-grid, .tel-layout {
    grid-template-columns: 1fr !important;
  }

  .call-item, .call-row {
    padding: 12px !important;
    border-radius: 10px !important;
  }

  .call-detail-panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999 !important;
    overflow-y: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ─────────────────────────────────────────────────────────────
     10. CHAT (#/chat)
     ───────────────────────────────────────────────────────────── */

  /* Двухколоночный layout → стек */
  .chat-layout, [class*="chat-grid"] {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }

  /* Список чатов на мобильном — скрываем когда открыт чат */
  .chat-sidebar {
    width: 100% !important;
    max-height: 40vh !important;
    overflow-y: auto !important;
  }

  .chat-main {
    width: 100% !important;
    height: 50vh !important;
  }

  .chat-input-area textarea {
    font-size: 16px !important; /* предотвращает iOS zoom */
  }

  .chat-message {
    max-width: 85% !important;
    font-size: 14px !important;
  }

  /* ─────────────────────────────────────────────────────────────
     11. CALENDAR (#/calendar)
     ───────────────────────────────────────────────────────────── */

  .cal-grid, .cal-week {
    font-size: 11px !important;
  }

  .cal-day {
    min-height: 40px !important;
    padding: 2px !important;
  }

  .cal-event {
    font-size: 10px !important;
    padding: 1px 3px !important;
  }

  .cal-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    text-align: center;
  }

  .cal-nav {
    justify-content: center !important;
  }

  /* ─────────────────────────────────────────────────────────────
     12. KANBAN (#/kanban)
     ───────────────────────────────────────────────────────────── */

  /* Канбан-колонки — горизонтальный скролл */
  .kanban-board, [class*="kanban-cols"],
  .kanban-columns {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 12px !important;
    padding-bottom: 12px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .kanban-board::-webkit-scrollbar,
  .kanban-columns::-webkit-scrollbar { display: none; }

  .kanban-column, .kanban-col {
    flex: 0 0 280px !important;
    min-width: 280px !important;
    scroll-snap-align: start !important;
  }

  .kanban-card {
    padding: 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
  }

  /* ─────────────────────────────────────────────────────────────
     13. GANTT (#/gantt)
     ───────────────────────────────────────────────────────────── */

  /* Гант-диаграмма — горизонтальный скролл обязателен */
  .gantt-container, .gantt-wrap,
  [class*="gantt-chart"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin;
  }

  .gantt-header {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* ─────────────────────────────────────────────────────────────
     14. FUNNEL (#/funnel)
     ───────────────────────────────────────────────────────────── */

  .funnel-container, .funnel-chart {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  .funnel-stage {
    font-size: 12px !important;
    padding: 10px !important;
  }

  /* ─────────────────────────────────────────────────────────────
     15. PERSONNEL / HR (#/personnel, #/hr-requests)
     ───────────────────────────────────────────────────────────── */

  .personnel-grid, .staff-grid {
    grid-template-columns: 1fr !important;
  }

  .employee-card {
    padding: 14px !important;
    border-radius: 12px !important;
  }

  .employee-card .avatar {
    width: 40px !important;
    height: 40px !important;
  }

  /* ─────────────────────────────────────────────────────────────
     16. PAYROLL (#/payroll)
     ───────────────────────────────────────────────────────────── */

  .payroll-grid, .payroll-summary {
    grid-template-columns: 1fr !important;
  }

  .payroll-header {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* ─────────────────────────────────────────────────────────────
     17. SETTINGS (#/settings)
     ───────────────────────────────────────────────────────────── */

  .settings-grid, .settings-layout {
    grid-template-columns: 1fr !important;
  }

  .settings-sidebar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 4px !important;
    padding: 8px 0 !important;
    scrollbar-width: none;
  }
  .settings-sidebar::-webkit-scrollbar { display: none; }

  .settings-sidebar > * {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* ─────────────────────────────────────────────────────────────
     18. APPROVALS (#/approvals)
     ───────────────────────────────────────────────────────────── */

  .approval-card {
    padding: 14px !important;
  }

  .approval-actions {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .approval-actions .btn {
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* ─────────────────────────────────────────────────────────────
     19. CONTRACTS (#/contracts)
     ───────────────────────────────────────────────────────────── */

  .contract-form .formrow {
    grid-template-columns: 1fr !important;
  }

  /* ─────────────────────────────────────────────────────────────
     20. PERMITS (#/permits)
     ───────────────────────────────────────────────────────────── */

  .permit-grid, .permit-detail {
    grid-template-columns: 1fr !important;
  }

  .permit-card {
    padding: 12px !important;
    border-radius: 10px !important;
  }

  /* ─────────────────────────────────────────────────────────────
     21. INVOICES (#/invoices)
     ───────────────────────────────────────────────────────────── */

  .invoice-form {
    grid-template-columns: 1fr !important;
  }

  .invoice-items-table {
    overflow-x: auto !important;
  }

  /* ─────────────────────────────────────────────────────────────
     22. TASKS (#/tasks)
     ───────────────────────────────────────────────────────────── */

  .task-grid, .tasks-layout {
    grid-template-columns: 1fr !important;
  }

  .task-card {
    padding: 12px !important;
    border-radius: 10px !important;
  }

  .task-detail-grid {
    grid-template-columns: 1fr !important;
  }

  /* ─────────────────────────────────────────────────────────────
     23. CUSTOMERS (#/customers)
     ───────────────────────────────────────────────────────────── */

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

  .customer-card {
    padding: 14px !important;
    border-radius: 12px !important;
  }

  .customer-detail {
    grid-template-columns: 1fr !important;
  }

  /* ─────────────────────────────────────────────────────────────
     24. EMAIL / MAILBOX (#/mailbox, #/email)
     ───────────────────────────────────────────────────────────── */

  .email-layout, .mail-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }

  .email-sidebar, .mail-sidebar {
    width: 100% !important;
    max-height: none !important;
  }

  .email-compose textarea {
    font-size: 16px !important;
  }

  /* ─────────────────────────────────────────────────────────────
     25. CORRESPONDENCE (#/correspondence)
     ───────────────────────────────────────────────────────────── */

  .corr-kpi {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .corr-kpi::-webkit-scrollbar { display: none; }

  .corr-kpi > * {
    flex: 0 0 160px !important;
    scroll-snap-align: start !important;
  }

  /* ─────────────────────────────────────────────────────────────
     26. BUH REGISTRY (#/buh-registry)
     ───────────────────────────────────────────────────────────── */

  .buh-summary {
    grid-template-columns: 1fr !important;
  }

  .buh-summary .fin-card {
    padding: 12px !important;
  }

  /* ─────────────────────────────────────────────────────────────
     27. KPI WORKS / KPI MONEY (#/kpi-works, #/kpi-money)
     ───────────────────────────────────────────────────────────── */

  .kpi-page-grid, .kpi-layout {
    grid-template-columns: 1fr !important;
  }

  .kpi-chart-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  /* ─────────────────────────────────────────────────────────────
     28. TRAVEL (#/travel)
     ───────────────────────────────────────────────────────────── */

  .travel-grid, .travel-form {
    grid-template-columns: 1fr !important;
  }

  /* ─────────────────────────────────────────────────────────────
     29. ALL WORKS / ALL ESTIMATES (#/all-works, #/all-estimates)
     ───────────────────────────────────────────────────────────── */

  .all-works-kpi, .all-estimates-kpi {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .all-works-kpi > *, .all-estimates-kpi > * {
    flex: 0 0 150px !important;
    scroll-snap-align: start !important;
  }

  /* ─────────────────────────────────────────────────────────────
     30. ACTION MENU
     ───────────────────────────────────────────────────────────── */

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

  /* ─────────────────────────────────────────────────────────────
     31. AUTO REPORTS (#/auto-reports)
     ───────────────────────────────────────────────────────────── */

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

  /* ─────────────────────────────────────────────────────────────
     32. ENGINEER DASHBOARD (#/engineer-dashboard)
     ───────────────────────────────────────────────────────────── */

  .eng-grid, .eng-kpi {
    grid-template-columns: 1fr !important;
  }

  /* ─────────────────────────────────────────────────────────────
     33. MEETINGS (#/meetings)
     ───────────────────────────────────────────────────────────── */

  .meeting-card, .meeting-detail {
    padding: 14px !important;
    border-radius: 12px !important;
  }

  .meeting-form .formrow {
    grid-template-columns: 1fr !important;
  }

  /* ─────────────────────────────────────────────────────────────
     34. OFFICE EXPENSES (#/office-expenses)
     ───────────────────────────────────────────────────────────── */

  .office-exp-grid {
    grid-template-columns: 1fr !important;
  }

  /* ─────────────────────────────────────────────────────────────
     35. PM ANALYTICS / TO ANALYTICS
     ───────────────────────────────────────────────────────────── */

  .analytics-grid, .analytics-charts {
    grid-template-columns: 1fr !important;
  }

  .analytics-chart-card {
    overflow-x: auto !important;
  }

  /* ─────────────────────────────────────────────────────────────
     36. SITE INSPECTIONS
     ───────────────────────────────────────────────────────────── */

  .inspection-form .formrow {
    grid-template-columns: 1fr !important;
  }

  /* ─────────────────────────────────────────────────────────────
     37. BOOKING
     ───────────────────────────────────────────────────────────── */

  .booking-grid, .booking-calendar {
    grid-template-columns: 1fr !important;
  }

  /* ─────────────────────────────────────────────────────────────
     38. INLINE STYLE OVERRIDES — Высокоспецифичные
     Перебиваем inline grid-template-columns в JS-модулях
     ───────────────────────────────────────────────────────────── */

  /* KPI блоки из app.js */
  .kpi[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .kpi[style*="grid-template-columns"]::-webkit-scrollbar { display: none; }

  .kpi[style*="grid-template-columns"] > * {
    flex: 0 0 150px !important;
    min-width: 150px !important;
    scroll-snap-align: start !important;
  }

  /* Универсальный grid-reset для div с inline grid */
  div[style*="display:grid"][style*="grid-template-columns"],
  div[style*="display: grid"][style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Но НЕ сбрасываем keypads и специальные элементы */
  .sg-keypad[style*="grid-template-columns"],
  .pk-keypad[style*="grid-template-columns"],
  [class*="keypad"][style*="grid-template-columns"] {
    grid-template-columns: revert !important;
  }

  /* formrow с inline grid — принудительно 1 колонка */
  .formrow[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* grid-column: span — убираем на мобильном */
  [style*="grid-column:1/-1"],
  [style*="grid-column: 1/-1"],
  [style*="grid-column: 1 / -1"] {
    grid-column: auto !important;
  }

  /* ─────────────────────────────────────────────────────────────
     39. BARROW (inline chart bars из app.js)
     ───────────────────────────────────────────────────────────── */

  .barrow {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  .barrow .bar-outer {
    height: 16px !important;
  }

  /* ─────────────────────────────────────────────────────────────
     40. MOBILE-SPECIFIC POLISH
     ───────────────────────────────────────────────────────────── */

  /* Panel padding на мобильном */
  .panel {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  /* Page title */
  .page-title, h2.page-title {
    font-size: 18px !important;
    text-align: center !important;
  }

  /* Section labels */
  .section-label {
    font-size: 13px !important;
  }

  /* Help text */
  .help {
    font-size: 12px !important;
  }

  /* Pill (user badge) */
  .pill {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  /* Horizontal rules */
  .hr, hr {
    margin: 12px 0 !important;
  }

  /* Breadcrumbs */
  .breadcrumbs, .breadcrumb {
    font-size: 12px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none;
  }

  /* Search inputs */
  .search-input, input[type="search"] {
    width: 100% !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
  }

  /* Action dropdown */
  .dropdown-menu {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
    animation: m-slide-up 0.25s ease-out !important;
  }

  .dropdown-menu .dropdown-item {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
  }

  /* ─────────────────────────────────────────────────────────────
     41. PRINT-ONLY / DESKTOP-ONLY — скрываем
     ───────────────────────────────────────────────────────────── */

  .print-only, .no-mobile {
    display: none !important;
  }

}

/* ═══════════════════════════════════════════════════════════════
   MOBILE CSS PATCH 2 — Work Cards, Dashboard, Menu, Filters
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ─── Work Cards ─── */
  .m-work-cards { display:flex; flex-direction:column; gap:12px; }
  .m-work-card {
    background:var(--bg2); border-radius:14px; padding:16px;
    border:1px solid var(--brd); box-shadow:0 2px 8px rgba(0,0,0,.15);
    transition:all .2s ease;
  }
  .m-work-card:active { transform:scale(0.98); background:var(--bg3); }
  .m-wc-header { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:6px; }
  .m-wc-customer { font-weight:700; font-size:15px; color:var(--t1); flex:1; line-height:1.3; }
  .m-wc-status {
    font-size:11px; font-weight:700; padding:3px 10px; border-radius:99px; white-space:nowrap;
    border:1.5px solid; background:transparent;
  }
  .m-wc-title { font-size:13px; color:var(--t2); margin-bottom:8px; line-height:1.4; }
  .m-wc-dates { font-size:12px; color:var(--t3); margin-bottom:12px; }
  .m-wc-money {
    padding:12px; background:var(--bg3); border-radius:10px; margin-bottom:12px;
  }
  .m-wc-contract, .m-wc-received {
    display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;
  }
  .m-wc-label { font-size:11px; color:var(--t3); text-transform:uppercase; font-weight:700; letter-spacing:0.04em; }
  .m-wc-val { font-size:14px; font-weight:700; color:var(--t1); }
  .m-wc-progress-bar {
    height:6px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; margin-top:4px;
  }
  .m-wc-progress-fill { height:100%; border-radius:99px; transition:width .4s ease; }
  .m-wc-footer { display:flex; justify-content:space-between; align-items:center; }
  .m-wc-left { font-size:12px; color:var(--t3); }
  .m-wc-footer .btn { min-height:36px; border-radius:8px; font-size:13px; padding:6px 16px; }

  /* ─── Dashboard KPI Mobile ─── */
  .dash-grid {
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }
  .dash-card {
    padding:14px !important;
  }
  .dash-card-value {
    font-size:22px !important;
  }
  .dash-card-title {
    font-size:9px !important;
    letter-spacing:1px !important;
    margin-bottom:6px !important;
  }
  .dash-card-sub {
    font-size:11px !important;
  }
  .dash-card-icon {
    font-size:32px !important;
    right:8px !important;
    opacity:.1 !important;
  }
  .dash-card-row {
    gap:8px !important;
    margin-top:8px !important;
    padding-top:8px !important;
  }
  .dash-card-row .mini-label {
    font-size:8px !important;
  }
  .dash-card-row .mini-value {
    font-size:14px !important;
  }
  .dash-chart-row {
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .dash-chart-card {
    padding:14px !important;
  }
  .dash-chart-canvas {
    height:140px !important;
  }
  .dash-header h2 {
    font-size:18px !important;
  }
  .dash-period {
    font-size:12px !important;
  }
  .dash-section-title {
    font-size:12px !important;
  }
  .dash-quick {
    gap:8px !important;
  }
  .dash-quick a {
    padding:10px 12px !important;
    font-size:12px !important;
    flex:1 1 calc(50% - 4px) !important;
    min-width:0 !important;
    justify-content:center !important;
    text-align:center !important;
  }

  /* ─── Custom Dashboard Widgets ─── */
  .custom-dash .dash-grid {
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .custom-dash h2 {
    font-size:18px !important;
  }
  .dash-rune-divider {
    font-size:12px !important;
    margin:8px 0 !important;
  }
  .dash-widget {
    border-radius:14px !important;
  }
  .dash-widget-header {
    padding:12px 14px !important;
    font-size:14px !important;
  }
  .dash-widget-content {
    padding:12px 14px !important;
  }

  /* ─── More Menu Premium ─── */
  .m-more-page {
    padding:0 !important;
  }
  .m-user-card {
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
    padding:20px 16px !important;
    background:linear-gradient(135deg, var(--bg2), var(--bg3)) !important;
    border-radius:16px !important;
    margin-bottom:16px !important;
    border:1px solid var(--brd) !important;
    box-shadow:0 4px 16px rgba(0,0,0,.2) !important;
  }
  .m-user-avatar {
    width:52px !important; height:52px !important;
    border-radius:50% !important;
    background:linear-gradient(135deg, var(--gold), var(--red)) !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    font-size:22px !important; font-weight:900 !important; color:#fff !important;
    box-shadow:0 2px 8px rgba(212,168,67,.3) !important;
    flex-shrink:0 !important;
  }
  .m-user-info { flex:1 !important; min-width:0 !important; }
  .m-user-name {
    font-size:17px !important; font-weight:700 !important; color:var(--t1) !important;
    white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
  }
  .m-user-role {
    font-size:12px !important; color:var(--gold) !important; font-weight:600 !important;
    margin-top:2px !important;
  }

  .m-menu-section {
    margin-bottom:12px !important;
  }
  .m-menu-section-title {
    font-size:11px !important;
    text-transform:uppercase !important;
    letter-spacing:1.5px !important;
    color:var(--gold) !important;
    font-weight:800 !important;
    padding:0 4px 8px !important;
  }
  .m-menu-list {
    background:var(--bg2) !important;
    border-radius:14px !important;
    border:1px solid var(--brd) !important;
    overflow:hidden !important;
  }
  .m-menu-item {
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
    padding:14px 16px !important;
    color:var(--t1) !important;
    text-decoration:none !important;
    border-bottom:1px solid rgba(255,255,255,.04) !important;
    transition:background .15s ease !important;
    -webkit-tap-highlight-color:transparent !important;
  }
  .m-menu-item:last-child { border-bottom:none !important; }
  .m-menu-item:active {
    background:rgba(212,168,67,.08) !important;
  }
  .m-menu-icon {
    font-size:22px !important;
    width:36px !important; height:36px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    background:var(--bg3) !important;
    border-radius:10px !important;
    flex-shrink:0 !important;
  }
  .m-menu-label {
    flex:1 !important;
    font-size:15px !important;
    font-weight:500 !important;
  }
  .m-menu-arrow {
    font-size:20px !important;
    color:var(--t3) !important;
    font-weight:300 !important;
  }

  /* ─── Tender Filter Chips on Mobile ─── */
  .m-tender-tools {
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    padding:0 !important;
  }
  .m-tender-tools .field {
    flex:1 1 calc(50% - 4px) !important;
    min-width:0 !important;
  }
  .m-tender-tools .field label {
    font-size:10px !important;
    margin-bottom:2px !important;
  }
  .m-tender-tools .field select,
  .m-tender-tools .field input {
    font-size:13px !important;
    padding:8px 10px !important;
    min-height:38px !important;
    border-radius:10px !important;
  }
  .m-tender-tools > div:last-child {
    width:100% !important;
    flex:1 1 100% !important;
  }
  .m-tender-tools > div:last-child .btn {
    flex:1 !important;
    min-height:42px !important;
    border-radius:10px !important;
    font-size:14px !important;
  }

  /* ─── KPI Summary Widget (custom dashboard) ─── */
  #wc_kpi_summary > div {
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }
  #wc_kpi_summary > div > div {
    padding:10px 12px !important;
  }
  #wc_kpi_summary > div > div > div:first-child {
    font-size:9px !important;
  }
  #wc_kpi_summary > div > div > div:last-child {
    font-size:18px !important;
  }

  /* ─── Alerts Dashboard ─── */
  .dash-alerts {
    padding:14px !important;
    border-radius:12px !important;
    margin-bottom:16px !important;
  }
  .dash-alert-item {
    font-size:12px !important;
    padding:8px 0 !important;
  }

  /* ─── Distribution Panel Mobile ─── */
  #dist_panel table {
    display:block !important;
  }
  #dist_panel tr {
    display:flex !important;
    flex-direction:column !important;
    padding:12px !important;
    background:var(--bg3) !important;
    border-radius:10px !important;
    margin-bottom:8px !important;
    border:1px solid var(--brd) !important;
  }
  #dist_panel td {
    display:block !important;
    padding:4px 0 !important;
    border:none !important;
  }
  #dist_panel select {
    width:100% !important;
    min-width:0 !important;
    margin-bottom:8px !important;
  }
  #dist_panel button {
    width:100% !important;
    margin:0 !important;
  }

  /* ─── Finances Page Mobile ─── */
  .fin-summary {
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }
  .fin-header {
    flex-direction:column !important;
    gap:8px !important;
  }

  /* ─── Widget Picker Grid ─── */
  .modal .widget-pick {
    padding:12px !important;
  }
  /* Make widget picker 2 columns on mobile */
  .modal [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns:repeat(2, 1fr) !important;
    gap:8px !important;
  }

  /* ─── Approvals Page Cards ─── */
  .approval-card, .est-card, .bonus-card {
    border-radius:14px !important;
    margin-bottom:10px !important;
  }

  /* ─── Panel spacing ─── */
  .panel {
    padding:12px !important;
    border-radius:14px !important;
    margin:0 !important;
  }
  .panel .help:first-child {
    font-size:11px !important;
    margin-bottom:8px !important;
  }
  .panel .hr {
    margin:10px 0 !important;
  }

}

/* ═══════════════════════════════════════════════════════════════
   MOBILE CSS PATCH 3 — Modal Forms, Detail Pages, Bottom Sheet UX
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ─── Modal Form Rows ─── */
  .formrow, .form-row, .form-grid {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .formrow > div[style*="grid-column"],
  .form-row > div[style*="grid-column"],
  .form-grid > div[style*="grid-column"] {
    grid-column:1 / -1 !important;
  }
  .formrow label, .form-row label, .form-grid label {
    font-size:12px !important;
    font-weight:600 !important;
    color:var(--t2) !important;
    margin-bottom:4px !important;
    display:block !important;
  }
  .formrow input, .formrow select, .formrow textarea,
  .form-row input, .form-row select, .form-row textarea,
  .form-grid input, .form-grid select, .form-grid textarea {
    width:100% !important;
    min-height:44px !important;
    font-size:15px !important;
    border-radius:10px !important;
    padding:10px 14px !important;
    box-sizing:border-box !important;
    -webkit-appearance:none !important;
  }
  .formrow textarea {
    min-height:80px !important;
    resize:vertical !important;
  }

  /* ─── Modal Content on Mobile ─── */
  .modal .help, .modal-content .help {
    font-size:12px !important;
    line-height:1.5 !important;
  }
  .modal .hr, .modal-content .hr {
    margin:12px 0 !important;
  }
  .modal .pill, .modal-content .pill {
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:6px !important;
    padding:10px !important;
    border-radius:10px !important;
  }
  .modal .pill .who {
    font-size:13px !important;
  }

  /* ─── Modal Footer Buttons ─── */
  .modal [style*="display:flex"][style*="gap:10px"],
  .modal-content [style*="display:flex"][style*="gap:10px"] {
    flex-wrap:wrap !important;
  }
  .modal [style*="display:flex"][style*="gap:10px"] .btn,
  .modal-content [style*="display:flex"][style*="gap:10px"] .btn {
    min-height:44px !important;
    border-radius:10px !important;
    font-size:14px !important;
    flex:1 1 calc(50% - 5px) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  /* ─── Document List in Modal ─── */
  #docsBox {
    gap:8px !important;
  }
  #docsBox .pill {
    flex-direction:row !important;
    flex-wrap:wrap !important;
  }
  #docsBox .row {
    flex-wrap:wrap !important;
    gap:8px !important;
  }
  #docsBox .btn {
    min-height:38px !important;
    border-radius:8px !important;
    font-size:13px !important;
    flex:1 !important;
  }

  /* ─── Table scrollwrap ─── */
  [style*="overflow:auto"], [style*="overflow: auto"] {
    -webkit-overflow-scrolling:touch !important;
    border-radius:10px !important;
  }

  /* ─── Page Title ─── */
  .page-title, h2 {
    font-size:18px !important;
    word-break:break-word !important;
  }
  .page-title + .help, h2 + .help {
    font-size:12px !important;
  }

  /* ─── Tags & Pills ─── */
  .tag {
    font-size:11px !important;
    padding:6px 10px !important;
  }
  .pill {
    padding:8px 12px !important;
    border-radius:10px !important;
  }
  .badge {
    font-size:10px !important;
    padding:3px 8px !important;
    border-radius:6px !important;
  }

  /* ─── Buttons on Mobile ─── */
  .btn {
    min-height:42px !important;
    border-radius:10px !important;
    font-size:14px !important;
    padding:8px 16px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    -webkit-tap-highlight-color:transparent !important;
  }
  .btn.mini {
    min-height:34px !important;
    font-size:12px !important;
    padding:6px 12px !important;
  }
  .btn.ghost {
    border-width:1.5px !important;
  }

  /* ─── KPI Cards Grid (preserve 2-col) ─── */
  .kpi-grid, [class*="kpi-grid"] {
    grid-template-columns:repeat(2, 1fr) !important;
    gap:8px !important;
  }
  .kpi-card, [class*="kpi-card"] {
    padding:12px !important;
    border-radius:12px !important;
  }

  /* ─── Tabs / NavTabs ─── */
  .nav-tabs, .tab-nav, [class*="tab-nav"] {
    display:flex !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    flex-wrap:nowrap !important;
    gap:0 !important;
    padding-bottom:2px !important;
    border-bottom:2px solid var(--brd) !important;
    margin-bottom:12px !important;
  }
  .nav-tabs > *, .tab-nav > * {
    flex-shrink:0 !important;
    white-space:nowrap !important;
    padding:10px 16px !important;
    font-size:13px !important;
  }

  /* ─── Stats/Summary Cards ─── */
  .stats-grid, [class*="stats"] {
    grid-template-columns:repeat(2, 1fr) !important;
    gap:8px !important;
  }

  /* ─── HR Rating / Personnel ─── */
  .rating-card, .person-card {
    padding:14px !important;
    border-radius:14px !important;
  }

  /* ─── Email / Mailbox ─── */
  .email-list .email-row, .mail-item {
    padding:12px !important;
    font-size:13px !important;
  }

  /* ─── Scrollbar hidden on mobile ─── */
  ::-webkit-scrollbar {
    width:3px !important;
    height:3px !important;
  }
  ::-webkit-scrollbar-track {
    background:transparent !important;
  }
  ::-webkit-scrollbar-thumb {
    background:rgba(255,255,255,.1) !important;
    border-radius:3px !important;
  }

  /* ─── Animations ─── */
  @keyframes m-fade-in {
    from { opacity:0; transform:translateY(8px); }
    to { opacity:1; transform:translateY(0); }
  }
  .m-auto-card, .m-work-card, .m-tender-card {
    animation:m-fade-in 0.2s ease-out;
  }

  /* ─── Empty states ─── */
  .m-empty-state {
    text-align:center !important;
    padding:40px 20px !important;
    color:var(--t3) !important;
    font-size:15px !important;
  }

  /* ─── Bottom spacing for tab bar ─── */
  .m-content {
    padding-bottom:80px !important;
  }

  /* ─── Inline flex/grid resets ─── */
  [style*="display:flex"][style*="gap"] {
    flex-wrap:wrap !important;
  }

  /* ─── Select dropdown arrows (iOS) ─── */
  select {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:right 12px center !important;
    background-size:12px !important;
    padding-right:32px !important;
  }

  /* ─── Focus states ─── */
  input:focus, select:focus, textarea:focus {
    outline:none !important;
    border-color:var(--gold) !important;
    box-shadow:0 0 0 3px rgba(212,168,67,.15) !important;
  }

  /* ─── Horizontal Rules ─── */
  .hr, hr {
    border:none !important;
    height:1px !important;
    background:var(--brd) !important;
    margin:12px 0 !important;
  }

  /* ─── Loading/Skeleton ─── */
  .skeleton, [class*="skeleton"] {
    border-radius:10px !important;
  }

  /* ─── PRE-TENDER cards ─── */
  .pt-card {
    border-radius:14px !important;
    padding:14px !important;
    margin-bottom:10px !important;
  }

  /* ─── Gantt horizontal scroll hint ─── */
  .gantt-wrap, [class*="gantt"] {
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  /* ─── Kanban columns ─── */
  .kanban-board {
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    flex-wrap:nowrap !important;
    padding-bottom:16px !important;
  }
  .kanban-column {
    min-width:280px !important;
    flex-shrink:0 !important;
  }

  /* ─── Chat mobile ─── */
  .chat-messages {
    max-height:calc(100vh - 220px) !important;
  }
  .chat-input-wrap {
    padding:8px !important;
    gap:8px !important;
  }
  .chat-input-wrap input, .chat-input-wrap textarea {
    min-height:42px !important;
    font-size:15px !important;
  }

}

/* v8.7.2: removed - desktop untouched */