/**
 * Mobile PWA - Native-quality layout and components
 * Applied only on small viewports (≤768px) for authenticated customer users.
 * Brand: Mint Green #10b981
 */

/* Chat error icon (all viewports): red "!" to the right of failed outgoing bubble */
.msg-row .msg-error-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  color: #ef4444;
  font-size: 1rem;
  flex-shrink: 0;
  align-self: flex-end;
}

/* Kebab menu button: hidden by default, shown only on mobile */
.mobile-kebab-btn {
  display: none;
}

/* ============================================
   Bottom Tab Bar (iOS-style, glassmorphism)
   ============================================ */
@media (max-width: 768px) {
  :root {
    --mobile-tab-bar-height: 64px;
    --mobile-brand-green: #10b981;
    --mobile-bubble-incoming: #F2F2F7;
    --mobile-bubble-outgoing: #10b981;
  }

  /* Reserve space so content scrolls above the bar without being clipped */
  body.with-sidebar .app-content {
    padding-bottom: calc(var(--mobile-tab-bar-height) + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
  }

  /* Top bar safe area */
  .topbar-modern {
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* Hide hamburger and Esci when bottom tab bar is present (customer only) */
  body.with-sidebar .mobile-hide-with-tab-bar.sidebar-toggle-btn,
  body.with-sidebar .mobile-hide-with-tab-bar.topbar-logout {
    display: none !important;
  }

  /* Bottom tab bar - fixed, glassmorphism */
  .mobile-bottom-tab-bar {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--mobile-tab-bar-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    z-index: 970;
    align-items: center;
    justify-content: space-around;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  .mobile-tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 8px;
    color: #6b7280;
    text-decoration: none;
    font-size: 0.625rem;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-tab-item:active {
    transform: scale(0.96);
  }

  .mobile-tab-item.active {
    color: var(--mobile-brand-green);
  }

  .mobile-tab-item i {
    font-size: 1.35rem;
    margin-bottom: 2px;
  }

  .mobile-tab-badge {
    position: absolute;
    top: 2px;
    right: 50%;
    transform: translate(50%, -50%);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    color: #fff;
    background: #ef4444;
    border-radius: 8px;
  }

  .mobile-tab-item-wrap {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* Kebab menu button (3-dot) — top-right, opens Profilo overlay */
  .mobile-kebab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin-left: 6px;
    background: none;
    border: none;
    border-radius: 50%;
    color: #374151;
    font-size: 1.25rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .mobile-kebab-btn:hover {
    background: rgba(0, 0, 0, 0.06);
  }

  .mobile-kebab-btn:active {
    background: rgba(0, 0, 0, 0.1);
    transform: scale(0.94);
  }

  /* Campanella notifiche (a sx del kebab): apre modal notifiche */
  .mobile-notifications-bell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin-right: 2px;
    background: none;
    border: none;
    border-radius: 50%;
    color: #374151;
    font-size: 1.15rem;
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .mobile-notifications-bell:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--mobile-brand-green, #10b981);
  }
  .mobile-notifications-bell:active {
    background: rgba(0, 0, 0, 0.1);
    transform: scale(0.94);
  }
  .mobile-notifications-bell-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    border: 1.5px solid #fff;
  }

  /* Modal notifiche: adattato per mobile (dimensioni ridotte, più leggibile) */
  .notifications-modal-dialog {
    max-width: min(calc(100vw - 24px), 400px);
    margin-left: 12px;
    margin-right: 12px;
  }
  .notifications-modal .modal-content {
    border-radius: 14px;
  }
  .notifications-modal .modal-header {
    padding: 0.875rem 1rem;
  }
  .notifications-modal .modal-title {
    font-size: 1.1rem;
  }
  .notifications-modal .modal-body {
    padding: 1rem;
    max-height: 65vh;
  }
  .notifications-modal .notification-item {
    padding: 0.875rem 1rem;
    padding-right: 2.5rem;
    margin-bottom: 0.75rem;
    border-radius: 10px;
  }
  .notifications-modal .notification-item-carla {
    padding: 0.65rem 2rem 0.65rem 0.65rem;
    margin-bottom: 0.5rem;
    border-radius: 8px;
  }
  .notifications-modal .notification-item .d-flex {
    gap: 0.75rem;
  }
  .notifications-modal .notif-carla-icon {
    width: 30px;
    height: 30px;
    font-size: 0.85rem;
  }
  .notifications-modal .notif-carla-headline {
    font-size: 0.8125rem;
  }
  .notifications-modal .notif-carla-when {
    font-size: 0.72rem;
  }
  .notifications-modal .notif-carla-details {
    font-size: 0.7rem;
  }
  .notifications-modal .notification-icon {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
    border-radius: 10px;
  }
  .notifications-modal .notification-title {
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
  }
  .notifications-modal .notification-message {
    font-size: 0.8125rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
  }
  .notifications-modal .notification-dismiss {
    top: 0.5rem;
    right: 0.5rem;
    left: auto;
    width: 26px;
    height: 26px;
    font-size: 1rem;
  }
  .notifications-modal .empty-notifications {
    padding: 1.5rem 1rem;
  }
  .notifications-modal .empty-notifications p {
    font-size: 0.9rem;
  }
  .notifications-modal .modal-footer {
    padding: 0.75rem 1rem;
  }

  /* Tap feedback for cards and buttons (mobile) */
  @media (hover: none) {
    .kpi-card:active,
    .quick-link-card:active,
    .btn:active {
      transform: scale(0.96);
    }
    .kpi-card,
    .quick-link-card {
      transition: transform 0.1s ease;
    }
  }

  /* ============================================
     Chat bubbles - iMessage style (mobile)
     ============================================ */
  .msg {
    border-radius: 18px !important;
    padding: 10px 14px !important;
    font-size: 0.9375rem;
    line-height: 1.35;
  }

  .msg.in {
    background: var(--mobile-bubble-incoming) !important;
    border: none !important;
    color: #1c1c1e;
  }

  .msg.out {
    background: var(--mobile-bubble-outgoing) !important;
    color: #fff !important;
  }

  .msg.out.msg-automation {
    background: #a7f3d0 !important;
    border-left: 3px solid #059669 !important;
    color: #1c1c1e !important;
  }

  .msg-row.out .msg-inner .msg-automation ~ .small.text-muted,
  .msg-row.out .msg-inner:has(.msg-automation) .small.text-muted {
    color: rgba(0, 0, 0, 0.6) !important;
  }

  .msg-row.out .msg-inner .small.text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
  }

  /* ============================================
     Messages Page - WhatsApp / Telegram mobile
     ============================================ */

  /* Height chain for messages page on real mobile: app-content and container must fill
     so that .mobile-messages-page and .convo-list get a real height (100% / flex: 1).
     Without this, only F12 mobile emulation shows the list; real phones get no height. */
  body.with-sidebar.page-messages .app-content,
  body.with-sidebar .app-content:has(.mobile-messages-page) {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
    padding-bottom: 0 !important;
    min-height: 0;
  }

  body.with-sidebar.page-messages .app-content .app-content-container,
  body.with-sidebar .app-content:has(.mobile-messages-page) .app-content-container {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
  }

  /* All title-box pages: minimal space between topbar and box (same as Messaggi) */
  .container-fluid.px-4.py-3 {
    padding-top: 0.75rem !important;
  }

  .admin-dashboard-header {
    margin-top: 0 !important;
  }

  /* Remove all padding/margin from the messages container - full bleed, but keep minimal top */
  .mobile-messages-page.container-fluid {
    padding: 0.75rem 0 0 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    height: 100%;
    overflow: hidden;
  }

  /* Messaggi: same title box, font sizes and side spacing as Clienti/Informazioni/Impostazioni */
  .mobile-messages-page .admin-dashboard-header {
    margin-left: 0.75rem !important;
    margin-right: 0.75rem !important;
    margin-top: 0 !important;
  }

  .mobile-messages-page .admin-dashboard-header > .d-flex {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.75rem !important;
  }

  .mobile-messages-page .admin-dashboard-title {
    font-family: 'Poppins', 'Inter', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #0b1320 !important;
    margin: 0 0 0.5rem 0 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.3 !important;
  }

  .mobile-messages-page .admin-dashboard-subtitle {
    font-size: 0.85rem !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
  }

  /* Carla status: green/gray button only (no switch symbol), "Carla al lavoro" / "Carla in riposo" */
  .mobile-messages-page .carla-status-toggle-wrapper {
    flex-shrink: 0 !important;
  }

  .mobile-messages-page .carla-status-card {
    min-width: 0 !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 10px !important;
    border: none !important;
    flex-shrink: 0;
    margin: 0 !important;
    cursor: pointer !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mobile-messages-page .carla-status-card.status-active {
    background: #10b981 !important;
    color: #fff !important;
  }

  .mobile-messages-page .carla-status-card.status-resting {
    background: #94a3b8 !important;
    color: #fff !important;
  }

  .mobile-messages-page .carla-status-card .carla-status-content {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
  }

  .mobile-messages-page .carla-status-card .carla-status-header {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
  }

  .mobile-messages-page .carla-status-card .carla-status-indicator,
  .mobile-messages-page .carla-status-card .status-dot,
  .mobile-messages-page .carla-status-card .carla-toggle-switch {
    display: none !important;
  }

  .mobile-messages-page .carla-status-card .status-label {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    /* Always white on our solid green/gray button (override styles.css .status-active .status-label) */
    color: #fff !important;
  }

  .mobile-messages-page .carla-status-card .status-subtitle {
    display: none !important;
  }

  /* Hide the separate status pill when status button is in header */
  .mobile-messages-page .mobile-messages-pill {
    display: none !important;
  }

  /* Messages layout: full screen, single-column */
  .mobile-messages-page .messages-wrap {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    gap: 0 !important;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  /* Conversation list: fills screen, WhatsApp-style */
  .mobile-messages-page .convo-list {
    height: 100% !important;
    flex: 1;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: none;
    background: #fff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* "Conversazioni" sub-header */
  .mobile-messages-page .convo-list > .d-flex.mb-2 {
    padding: 10px 16px 6px;
    margin-bottom: 0 !important;
  }

  .mobile-messages-page .convo-list > .d-flex.mb-2 h5 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1c1c1e;
  }

  /* Conversation items - WhatsApp-style rows */
  .mobile-messages-page .convo-item {
    padding: 12px 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    gap: 12px;
    transition: background 0.15s ease, transform 0.1s ease;
  }

  .mobile-messages-page .convo-item:active {
    transform: scale(0.98);
    background: #f2f2f7 !important;
  }

  .mobile-messages-page .convo-item.active {
    background: rgba(16, 185, 129, 0.06) !important;
  }

  .mobile-messages-page .convo-item-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1c1c1e;
  }

  .mobile-messages-page .convo-item .small.text-muted {
    font-size: 0.8125rem;
    color: #8e8e93;
    margin-top: 2px;
  }

  /* Show the three-dots on mobile (always visible for touch) */
  .mobile-messages-page .convo-item .convo-item-menu {
    opacity: 1 !important;
  }

  /* Chat window: hidden by default, shown when a convo is selected */
  .mobile-messages-page .chat-window {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(var(--mobile-tab-bar-height) + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 960;
    height: unset !important;
    max-height: unset !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: #fff;
    flex-direction: column;
    padding: 0 !important;
  }

  .mobile-messages-page .chat-window.mobile-chat-open {
    display: flex !important;
  }

  /* Chat header bar inside the chat window */
  .mobile-messages-page .chat-window > .d-flex:first-child {
    padding: 0 12px;
    height: var(--topbar-height, 60px);
    min-height: var(--topbar-height, 60px);
    border-bottom: 1px solid #f1f5f9;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    align-items: center;
    gap: 8px;
    padding-top: env(safe-area-inset-top, 0px);
  }

  .mobile-messages-page .chat-window #chatTitle {
    font-size: 1rem !important;
    font-weight: 600;
    margin: 0;
  }

  .mobile-messages-page .chat-window #chatSubtitle {
    font-size: 0.75rem;
    color: #8e8e93;
  }

  /* Messages area fills remaining space */
  .mobile-messages-page .chat-window .messages {
    flex: 1;
    padding: 8px 12px !important;
    background: #f9fafb;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Input bar at the bottom (sits just above the tab bar) */
  .mobile-messages-page .chat-window > .mt-2.d-flex {
    padding: 8px 12px;
    background: #fff;
    border-top: 1px solid #f1f5f9;
    gap: 8px;
    margin: 0 !important;
  }

  .mobile-messages-page .chat-window #replyInput {
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.9375rem;
    border: 1px solid #e5e7eb;
    background: #f2f2f7;
  }

  .mobile-messages-page .chat-window #replyInput:focus {
    background: #fff;
    border-color: var(--mobile-brand-green);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
  }

  .mobile-messages-page .chat-window #sendBtn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
  }

  /* Mobile back button in chat */
  .mobile-chat-back-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--mobile-brand-green);
    font-size: 1.35rem;
    padding: 4px;
    margin-right: 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-chat-back-btn:active {
    transform: scale(0.9);
  }
}

/* Hide back button on desktop */
@media (min-width: 769px) {
  .mobile-chat-back-btn {
    display: none !important;
  }
}

/* ============================================
   Calendar Page - KalendarView month grid (mobile)
   ============================================ */
@media (max-width: 768px) {
  /* Hide big title + subtitle on mobile */
  .mobile-calendar-page .admin-dashboard-header .admin-dashboard-title,
  .mobile-calendar-page .admin-dashboard-header .admin-dashboard-subtitle {
    display: none !important;
  }

  .mobile-calendar-page .admin-dashboard-header {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Full-bleed container */
  .mobile-calendar-page.container-fluid {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Compact Google connect banner (mobile, very minimal) */
  .mobile-calendar-page .google-connect-banner {
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin-bottom: 4px;
    padding: 6px 10px;
    box-shadow: none;
  }

  .mobile-calendar-page .google-connect-banner .banner-icon {
    width: 28px;
    height: 28px;
    box-shadow: none;
  }

  .mobile-calendar-page .google-connect-banner .banner-icon i {
    font-size: 0.9rem;
  }

  .mobile-calendar-page .google-connect-banner strong {
    font-size: 0.8rem;
    margin-bottom: 0;
  }

  .mobile-calendar-page .google-connect-banner p {
    display: none;
  }

  .mobile-calendar-page .google-connect-banner #why-connect {
    display: none;
  }

  /* Compact status row */
  .mobile-calendar-page > .d-flex.mb-2 {
    padding: 6px 12px;
    margin-bottom: 0 !important;
    font-size: 0.8125rem;
  }

  .mobile-calendar-page .calendar-status-pill {
    font-size: 0.75rem;
    padding: 4px 8px;
  }

  /* Hide FullCalendar on mobile */
  .mobile-calendar-page .calendar-container {
    display: none !important;
  }

  /* ---- KalendarView Component ---- */

  .mobile-kalendar {
    display: flex;
    flex-direction: column;
    background: #fff;
    height: calc(100vh - var(--topbar-height, 60px) - var(--mobile-tab-bar-height) - env(safe-area-inset-bottom, 0px) - 36px);
    height: calc(100dvh - var(--topbar-height, 60px) - var(--mobile-tab-bar-height) - env(safe-area-inset-bottom, 0px) - 36px);
    overflow: hidden;
    position: relative;
  }

  /* Month header: < Febbraio 2026 > [Oggi] */
  .mobile-kalendar-header {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    gap: 4px;
    border-bottom: 1px solid #f1f5f9;
  }

  .mk-month-title {
    flex: 1;
    text-align: center;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #1c1c1e;
  }

  .mk-nav-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #f2f2f7;
    border-radius: 10px;
    color: #10b981;
    font-size: 1.1rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s ease;
  }

  .mk-nav-btn:active {
    transform: scale(0.92);
  }

  .mk-today-btn {
    padding: 6px 14px;
    border: none;
    background: #10b981;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s ease;
  }

  .mk-today-btn:active {
    transform: scale(0.94);
  }

  /* Weekday labels row */
  .mobile-kalendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    padding: 6px 8px 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #8e8e93;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* Month grid: 7 columns */
  .mobile-kalendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 4px 8px 8px;
  }

  /* Individual date cell */
  .mobile-kalendar-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
    min-height: 44px;
    cursor: pointer;
    border-radius: 12px;
    transition: background 0.15s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-kalendar-cell:active {
    transform: scale(0.93);
  }

  .mobile-kalendar-cell.other-month {
    opacity: 0.3;
  }

  .mk-day-num {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1c1c1e;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
  }

  /* Today: green ring */
  .mobile-kalendar-cell.today .mk-day-num {
    border: 2px solid #10b981;
    font-weight: 700;
    color: #10b981;
  }

  /* Selected: solid green fill */
  .mobile-kalendar-cell.selected .mk-day-num {
    background: #10b981;
    color: #fff !important;
    font-weight: 700;
    border-color: #10b981;
  }

  /* Event dots */
  .mobile-kalendar-dots {
    display: flex;
    gap: 3px;
    margin-top: 2px;
    height: 5px;
  }

  .mobile-kalendar-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
  }

  /* Events list section */
  .mobile-kalendar-events-header {
    padding: 10px 16px 4px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #1c1c1e;
    text-transform: capitalize;
    border-top: 1px solid #f1f5f9;
  }

  .mobile-kalendar-events {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px 80px;
  }

  .mobile-kalendar-empty {
    text-align: center;
    padding: 24px 16px;
    color: #8e8e93;
    font-size: 0.9375rem;
  }

  /* Event row */
  .mobile-kalendar-event-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 6px;
    background: #f9fafb;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-kalendar-event-row:active {
    transform: scale(0.98);
    background: #f2f2f7;
  }

  .mk-event-bar {
    width: 4px;
    min-height: 36px;
    border-radius: 2px;
    flex-shrink: 0;
    align-self: stretch;
  }

  .mk-event-content {
    flex: 1;
    min-width: 0;
  }

  .mk-event-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1c1c1e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mk-event-meta {
    font-size: 0.8125rem;
    color: #8e8e93;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mk-event-chevron {
    color: #c7c7cc;
    font-size: 0.875rem;
    flex-shrink: 0;
  }

  /* FAB: fixed above bottom tab bar (Profilo) so it stays visible when scrolling */
  .mobile-kalendar-fab {
    position: fixed !important;
    bottom: calc(var(--mobile-tab-bar-height) + env(safe-area-inset-bottom, 0px) + 12px) !important;
    right: 16px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease;
    z-index: 971;
  }

  .mobile-kalendar-fab:active {
    transform: scale(0.9);
  }

  /* Clienti page (mobile only): same title box and font sizes as Informazioni / Impostazioni */
  .mobile-customers-page .admin-dashboard-header {
    background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.03)) !important;
    border-radius: 16px !important;
    padding: 1.25rem 1rem !important;
    margin-bottom: 1rem !important;
    border: 1px solid rgba(16,185,129,0.15) !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08) !important;
  }

  .mobile-customers-page .admin-dashboard-title {
    font-family: 'Poppins', 'Inter', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #0b1320 !important;
    margin: 0 0 0.5rem 0 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.3 !important;
  }

  .mobile-customers-page .admin-dashboard-subtitle {
    font-size: 0.85rem !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
  }

  .mobile-customers-page .btn-add-customer-desktop {
    display: none !important;
  }

  .mobile-customers-fab {
    position: fixed !important;
    bottom: calc(var(--mobile-tab-bar-height) + env(safe-area-inset-bottom, 0px) + 12px) !important;
    right: 16px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease;
    z-index: 971;
  }

  .mobile-customers-fab:active {
    transform: scale(0.9);
  }

  /* Modifica Cliente page: same header box as Informazioni, compact back button */
  .customer-edit-page .admin-dashboard-header {
    background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.03)) !important;
    border-radius: 16px !important;
    padding: 1.25rem 1rem !important;
    margin-bottom: 1rem !important;
    border: 1px solid rgba(16,185,129,0.15) !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08) !important;
  }

  .customer-edit-page .admin-dashboard-title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #0b1320 !important;
    margin: 0 0 0.25rem 0 !important;
  }

  .customer-edit-page .admin-dashboard-subtitle {
    font-size: 0.85rem !important;
    color: #64748b !important;
    margin: 0 !important;
  }

  .customer-edit-page .btn-back-to-list {
    font-size: 0.8125rem;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
  }

  .customer-edit-page .btn-back-to-list .bi-arrow-left {
    font-size: 0.9rem;
  }

  .customer-edit-page .admin-connection-card .card-body .d-flex.justify-content-between .btn,
  .customer-edit-page .admin-connection-card .card-body .btn {
    font-size: 0.8125rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
  }
}

/* ============================================
   Mobile Menu overlay (Menu tab content)
   ============================================ */
@media (max-width: 768px) {
  .mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 980;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }

  .mobile-menu-overlay.show {
    opacity: 1;
    visibility: visible;
  }

  /* Bug report: use menu item on mobile; hide floating button */
  .bug-report-fab {
    display: none !important;
  }

  .mobile-menu-sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }

  .mobile-menu-overlay.show .mobile-menu-sheet {
    transform: translateY(0);
  }

  .mobile-menu-sheet a,
  .mobile-menu-sheet button.mobile-menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 4px;
    border-radius: 12px;
    color: #1c1c1e;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease, transform 0.1s ease;
  }

  .mobile-menu-sheet a:active,
  .mobile-menu-sheet button.mobile-menu-link:active {
    transform: scale(0.98);
  }

  .mobile-menu-sheet a:hover,
  .mobile-menu-sheet button.mobile-menu-link:hover {
    background: #f2f2f7;
  }

  .mobile-menu-sheet a i,
  .mobile-menu-sheet button.mobile-menu-link i {
    font-size: 1.25rem;
    color: #10b981;
  }

  .mobile-menu-sheet .menu-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 8px 0;
  }
}

/* ============================================
   Dashboard - Mobile Overrides
   ============================================ */
@media (max-width: 768px) {
  /* Hide desktop-style status card on mobile dashboard */
  .mobile-dashboard-page .carla-status-toggle-wrapper {
    display: none !important;
  }

  /* Hide graph section on mobile dashboard */
  .mobile-dashboard-page .graph-container {
    display: none !important;
  }

  /* Hide quick links on mobile dashboard */
  .mobile-dashboard-page .quick-links-grid {
    display: none !important;
  }

  /* Larger KPI counter numbers on mobile */
  .mobile-dashboard-page .kpi-value {
    font-size: 2rem !important;
    font-weight: 800 !important;
  }

  /* Status Pill - full width, tappable */
  .mobile-status-pill-section {
    margin-bottom: 1rem;
  }

  .mobile-status-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: 50px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-status-pill:active {
    transform: scale(0.97);
  }

  .mobile-status-pill:disabled {
    opacity: 0.7;
  }

  .mobile-status-pill.pill-active {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  }

  .mobile-status-pill.pill-resting {
    background: #e5e7eb;
    color: #374151;
  }

  .mobile-status-pill-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.3s ease;
  }

  .mobile-status-pill.pill-active .mobile-status-pill-dot {
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
    animation: pulse-pill 2s ease-in-out infinite;
  }

  .mobile-status-pill.pill-resting .mobile-status-pill-dot {
    background: #9ca3af;
  }

  @keyframes pulse-pill {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); }
    50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.15); }
  }

  /* ============================================
     Today's Appointments Section (Mobile)
     ============================================ */
  .mobile-today-appointments {
    margin-top: 16px;
    margin-bottom: 12px;
  }

  .today-appt-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
  }

  .today-appt-header i {
    font-size: 1.1rem;
    color: var(--mobile-brand-green, #10b981);
  }

  .today-appt-view-all {
    margin-left: auto;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mobile-brand-green, #10b981);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
  }

  .today-appt-view-all i {
    font-size: 0.7rem;
    color: inherit;
  }

  .today-appt-card {
    background: #fff;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border-left: 4px solid transparent;
    transition: opacity 0.2s ease;
  }

  .today-appt-card.appt-next {
    border-left-color: var(--mobile-brand-green, #10b981);
    background: #f0fdf4;
  }

  .today-appt-card.appt-past {
    opacity: 0.5;
    border-left-color: #d1d5db;
  }

  .today-appt-card .appt-time {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .today-appt-card .appt-time i {
    font-size: 0.75rem;
  }

  .today-appt-card.appt-next .appt-time {
    color: var(--mobile-brand-green, #10b981);
  }

  .today-appt-card .appt-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
  }

  .today-appt-card .appt-location {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .today-appt-card .appt-location i {
    font-size: 0.75rem;
  }

  .today-appt-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    color: #94a3b8;
    font-size: 0.9rem;
    background: #f8fafc;
    border-radius: 12px;
  }

  .today-appt-empty i {
    font-size: 1.2rem;
  }
}

/* Status pill and today's appointments hidden on desktop */
@media (min-width: 769px) {
  .mobile-status-pill-section {
    display: none !important;
  }
  .mobile-today-appointments {
    display: none !important;
  }
}

/* ============================================
   Chat - Date separator
   ============================================ */
.msg-date-separator {
  text-align: center;
  color: #8e8e93;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 12px 0 6px;
  margin: 4px 0;
}

.msg-date-separator span {
  background: rgba(0, 0, 0, 0.06);
  padding: 4px 12px;
  border-radius: 10px;
}

/* ============================================
   Mobile Calendar Modal fixes
   On real mobile devices the Bootstrap backdrop intercepts touch
   events, making form inputs unresponsive.  We disable the backdrop
   via JS and turn the modal itself into a full-screen overlay with
   its own opaque background.
   ============================================ */
@media (max-width: 768px) {
  /* --- Full-screen overlay (replaces Bootstrap backdrop) --- */
  #eventDetailModal.modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;      /* above everything */
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(0, 0, 0, 0.45) !important;  /* own backdrop tint */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #eventDetailModal .modal-dialog {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: flex !important;
    align-items: stretch !important;
    pointer-events: auto !important;
  }

  /* Contain modal in viewport: flex column so header/footer stay visible, body scrolls */
  #eventDetailModal .modal-content {
    border-radius: 0 !important;
    width: 100% !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  #eventDetailModal .modal-header {
    flex-shrink: 0 !important;
  }

  #eventDetailModal .modal-body {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #eventDetailModal .modal-footer {
    flex-shrink: 0 !important;
    position: sticky;
    bottom: 0;
    background: #fff;
    z-index: 10;
    padding: 0.75rem 1rem calc(env(safe-area-inset-bottom, 0px) + 0.75rem) !important;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
  }
  #eventDetailModal .modal-footer .btn {
    min-height: 44px;
    font-size: 0.9375rem;
  }

  /* --- Ensure every interactive element is tappable --- */
  #eventDetailModal input,
  #eventDetailModal textarea,
  #eventDetailModal select,
  #eventDetailModal button,
  #eventDetailModal label,
  #eventDetailModal .form-control,
  #eventDetailModal .form-select,
  #eventDetailModal .form-check-input,
  #eventDetailModal .form-check-label,
  #eventDetailModal .custom-datetime-picker,
  #eventDetailModal .btn-close {
    pointer-events: auto !important;
    -webkit-user-select: auto !important;
    user-select: auto !important;
    touch-action: manipulation !important;
    position: relative;
    z-index: 1;
  }

  /* Remove any stray Bootstrap backdrop if one leaks through */
  body.modal-open .modal-backdrop {
    display: none !important;
  }

  /* Hide the bottom tab bar when modal is open */
  body.modal-open .mobile-bottom-tab-bar {
    display: none !important;
  }

  /* Prevent body scroll when modal is open */
  body.modal-open {
    overflow: hidden !important;
  }
}

/* Bottom bar and menu overlay are hidden on desktop */
@media (min-width: 769px) {
  .mobile-bottom-tab-bar {
    display: none !important;
  }
  .mobile-menu-overlay {
    display: none !important;
  }
}