/* ═══════════════════════════════════════════════
   KEWEKE WORKSPACE — Mobile responsive overrides
   Breakpoint: 768px
   Móvil: sidebar = rail de iconos siempre visible (52px).
   El botón superior del rail abre el drawer completo (chat, etc.).
   ═══════════════════════════════════════════════ */

#mobile-member-filter { display: none; }

/* ── Mobile sidebar overlay backdrop ── */
#mobile-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 399;
  opacity: 0;
  transition: opacity 0.25s ease;
}
#mobile-sidebar-overlay.visible {
  opacity: 1;
}

@media (max-width: 768px) {
  /* ── Overlay: block on mobile ── */
  #mobile-sidebar-overlay { display: block; pointer-events: none; }
  #mobile-sidebar-overlay.visible { pointer-events: all; }

  /* ── Sidebar: icon rail, always visible ── */
  .sidebar {
    width: 52px;
    min-width: 52px;
    height: 100dvh;
    transition: none;
  }
  /* Rail = estado colapsado (mismas reglas que .sidebar.collapsed) */
  .sidebar:not(.mobile-open) .sidebar-brand { justify-content: center; padding: 14px 0 10px; gap: 0; }
  .sidebar:not(.mobile-open) .sidebar-logo-img,
  .sidebar:not(.mobile-open) .sidebar-logo-text { display: none; }
  .sidebar:not(.mobile-open) .sidebar-toggle { margin-left: 0; }
  .sidebar:not(.mobile-open) .nav-label { display: none; }
  .sidebar:not(.mobile-open) .sidebar-nav { padding: 0 4px; }
  .sidebar:not(.mobile-open) .nav-btn { justify-content: center; padding: 11px 0; gap: 0; }
  .sidebar:not(.mobile-open) .sidebar-section-label,
  .sidebar:not(.mobile-open) .sidebar-sep,
  .sidebar:not(.mobile-open) .sidebar-chat-header,
  .sidebar:not(.mobile-open) .sidebar-chat-nav { display: none; }
  .sidebar:not(.mobile-open) .sidebar-bottom { padding: 10px 4px 12px; }
  .sidebar:not(.mobile-open) .sidebar-user { justify-content: center; padding: 7px 0; gap: 0; flex: none; width: 100%; }
  .sidebar:not(.mobile-open) .sidebar-user-name { display: none; }
  .sidebar:not(.mobile-open) .sidebar-user-row .btn-icon { display: none; }
  .sidebar:not(.mobile-open) .sidebar-timer { padding: 7px; justify-content: center; gap: 0; }
  .sidebar:not(.mobile-open) .topbar-timer-text,
  .sidebar:not(.mobile-open) .topbar-timer-stop { display: none; }

  /* Drawer completo al pulsar el botón del rail */
  .sidebar.mobile-open {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    min-width: 240px;
    z-index: 400;
    box-shadow: 4px 0 24px rgba(0,0,0,0.18);
  }

  /* ── Content: fill remaining width ── */
  .content-wrap { width: 100%; }

  /* Ventana de notificaciones: a lo ancho en móvil */
  .notif-win { right: 8px; bottom: 8px; left: 8px; width: auto; max-height: 70vh; }
  .notif-win.min { left: auto; }

  /* ── Avatar pills → hidden on mobile (replaced by dropdown) ── */
  .board-assignee-pills { display: none !important; }
  #mobile-member-filter.mob-filter-visible {
    display: block !important;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 210;
    padding: 6px 26px 6px 10px;
    height: 32px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    font-family: var(--font);
    font-size: 12px;
    font-weight: 500;
    color: var(--c-text);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    max-width: 148px;
    outline: none;
  }

  /* ── Toolbars: una sola línea, hueco a la derecha para el filtro fijo ── */
  .board-toolbar,
  .list-toolbar,
  .cal-toolbar,
  .stats-tab-bar {
    padding: 9px 158px 8px 12px !important;
  }
  .tcal-sub-tabs { padding-left: 12px !important; padding-right: 12px !important; }
  .stats-tab { padding: 5px 8px !important; font-size: 12px !important; }
  .stats-tab svg { display: none; }
  .stats-tab-bar-left { gap: 2px !important; flex-shrink: 1; min-width: 0; }

  /* Buscar proyecto ocupa el resto de la línea (tablero + lista) */
  .board-search { flex: 1; width: auto; min-width: 0; height: 32px; }

  /* ── Board / Kanban: horizontal scroll ── */
  #view-board { overflow: hidden; }
  .board-container {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    display: flex !important;
    flex-direction: row !important;
    padding: 12px 12px 16px !important;
    gap: 10px !important;
    height: 100%;
    -webkit-overflow-scrolling: touch;
  }
  .kanban-col {
    min-width: 200px !important;
    max-width: 200px !important;
    flex-shrink: 0 !important;
  }

  /* Tarjetas compactas: más proyectos visibles de un vistazo */
  .col-cards { padding: 8px 7px 20px; gap: 5px; }
  .col-badge { padding: 3px 8px; }
  .col-name { font-size: 10px; }
  .col-count { font-size: 10px; }
  .project-card { min-height: 0; padding: 8px 10px; }
  .card-cover { width: calc(100% + 20px); height: 54px; margin: -8px -10px 7px; }
  .card-title { font-size: 12px; line-height: 1.3; margin-bottom: 1px; }
  .card-client { font-size: 10.5px; }
  .card-jobcode { font-size: 9px; padding: 0 4px; margin-bottom: 3px; }
  .card-footer { margin-top: 5px; padding-top: 5px; gap: 4px; }
  .card-avatar { width: 17px; height: 17px; font-size: 7px; border-width: 1.5px; }
  .card-due { font-size: 9.5px; }
  .card-priority { font-size: 8.5px; padding: 0 5px; }
  .card-notif-badge { min-width: 17px; height: 17px; font-size: 9px; border-radius: 9px; }
  .btn-add-task { font-size: 11.5px; padding: 4px 6px; }
  .empty-col { padding: 14px 8px 10px; }

  /* ── List view: search + filtro en la misma línea ── */
  .list-toolbar {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    height: auto !important;
  }
  .list-toolbar-left { display: none; }
  .list-toolbar-right { flex: 1; gap: 6px; justify-content: flex-start !important; min-width: 0; }

  /* ── Dashboard: todo vertical, scroll único de página ── */
  #view-dashboard { overflow: visible; }
  .dashboard-body {
    display: block;
    padding: 16px 14px calc(24px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }
  .dash-layout {
    display: flex !important;
    flex-direction: column;
    gap: 28px;
    overflow: visible;
  }
  .dash-col-left, .dash-col-right {
    overflow: visible;
    padding-bottom: 0;
  }

  /* ── Calendar: fit to screen width, equal columns ── */
  #view-calendar { overflow-y: auto; overflow-x: hidden; }
  .calendar-wrap { padding: 0 !important; }
  .cal-header { flex-wrap: wrap; gap: 6px; }
  .cal-toolbar { flex-wrap: wrap !important; }
  .cal-toolbar-right { width: 100%; justify-content: flex-start; }
  .cal-grid { min-width: 0 !important; width: 100%; grid-template-columns: repeat(7, 1fr) !important; }
  .cal-day-header { font-size: 9px; padding: 4px 0; letter-spacing: 0; text-align: center; overflow: hidden; }
  .cal-cell { min-height: 70px; padding: 2px 1px; overflow: hidden; }
  .cal-event { font-size: 8px; padding: 1px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

  /* ── Reports: breakdown table overflow ── */
  .chart-card { overflow-x: auto; }
  .breakdown-table { min-width: 0; table-layout: fixed; }
  .breakdown-table th:first-child,
  .breakdown-table td:first-child { width: 24px; }
  .breakdown-table td { word-break: break-word; font-size: 12px; padding: 8px 6px; }
  .breakdown-table th { padding: 6px; font-size: 10px; }

  /* ── Stats charts: single column ── */
  .stats-charts-grid { grid-template-columns: 1fr !important; }

  /* ── Project detail: full-screen ── */
  #view-project {
    position: fixed !important;
    inset: 0 !important;
    z-index: 250 !important;
    flex-direction: column !important;
  }
  .detail-main { flex-direction: column !important; overflow-y: auto !important; }
  .detail-sidebar {
    width: 100% !important;
    min-width: unset !important;
    max-width: unset !important;
    border-left: none !important;
    border-top: 1px solid var(--c-border) !important;
  }

  /* ── Chat popup: centered, most of the screen (was cut off at left:236px) ── */
  .chat-popup {
    left: 50%; right: auto; bottom: auto; top: 50%;
    width: 92vw; max-width: 440px;
    height: 78vh; max-height: 640px;
    transform: translate(-50%, calc(-50% + 10px)) scale(0.97);
  }
  .chat-popup.open { transform: translate(-50%, -50%) scale(1); }
  #chat-popup-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35);
    z-index: 899; opacity: 0; transition: opacity 0.15s ease;
  }
  #chat-popup-backdrop.visible { display: block; opacity: 1; }

  /* ── Chat ── */
  #view-chat { flex-direction: column !important; }
  .chat-sidebar {
    width: 100% !important;
    max-width: unset !important;
    height: 200px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--c-border) !important;
    flex-shrink: 0 !important;
  }
  .chat-main { flex: 1; min-height: 0; }

  /* ── Time/Stats: horizontal scroll on table ── */
  #view-stats .time-table-wrap,
  #view-stats .stats-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Modal: full-screen on small screens ── */
  #modal-overlay .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow-y: auto;
  }

  /* ── Touch targets: bigger tap areas ── */
  .btn-new { padding: 9px 16px !important; }

  /* ── Safe area bottom padding ── */
  .sidebar-bottom {
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
  .main {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ── Tablet (768–1024px): sidebar collapses to icons only ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .sidebar { width: 180px; min-width: 180px; }
  .sidebar-logo-text { font-size: 13px; }
  .dash-stats { grid-template-columns: repeat(2, 1fr) !important; }
}