/* Mobile & Tablet – Navigation, Ränder, kein horizontales Scrollen */

html {
  -webkit-text-size-adjust: 100%;
}

.crm-nav-toggle,
.crm-sidebar-close {
  display: none;
}

@media (max-width: 900px) {
  :root {
    --sidebar-w: 0;
    --mobile-pad: max(0.6rem, env(safe-area-inset-left));
    --mobile-pad-r: max(0.6rem, env(safe-area-inset-right));
    --mobile-pad-b: max(0.65rem, env(safe-area-inset-bottom));
    --mobile-content-max: min(100%, 28rem);
  }

  html,
  body.crm-body {
    overflow-x: hidden;
    max-width: 100%;
  }

  .crm-main,
  .crm-view,
  .crm-layout,
  .panel,
  .board-section,
  .pipeline-board,
  .deal-card,
  .phase-column,
  input,
  select,
  textarea,
  button,
  .btn {
    box-sizing: border-box;
    max-width: 100%;
  }

  .crm-view img,
  .crm-view svg:not(.crm-sidebar-icon svg) {
    max-width: 100%;
    height: auto;
  }

  body.crm-body:has(.crm-shell) {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
  }

  .crm-shell {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Sidebar als ausklappbares Drawer-Menü */
  .crm-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1100;
    width: min(288px, 92vw);
    max-width: 92vw;
    transform: translateX(-105%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
    overflow: hidden;
  }

  body.crm-nav-open .crm-sidebar {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.35);
  }

  .crm-sidebar-logo-text,
  .crm-sidebar-label,
  .crm-sidebar-user-text,
  .crm-sidebar-footer-btn {
    display: block !important;
  }

  .crm-sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: max(0.85rem, env(safe-area-inset-top)) 0.85rem 0.65rem;
  }

  .crm-sidebar-close {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #e8ecf1;
    cursor: pointer;
  }

  .crm-sidebar-close:hover {
    background: rgba(255, 255, 255, 0.14);
  }

  .crm-sidebar-link {
    justify-content: flex-start !important;
    padding: 0.7rem 0.85rem !important;
    min-height: 2.75rem;
  }

  .crm-sidebar-link.is-active::before {
    display: block !important;
  }

  .crm-sidebar-nav {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .crm-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }

  .crm-nav-backdrop:not([hidden]) {
    opacity: 1;
    pointer-events: auto;
  }

  /* Hauptbereich */
  .crm-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .crm-page-header {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: center;
    gap: 0.4rem 0.5rem;
    padding: 0.5rem var(--mobile-pad-r) 0.55rem var(--mobile-pad);
    padding-top: max(0.5rem, env(safe-area-inset-top));
    min-height: auto;
  }

  .crm-nav-toggle {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .crm-nav-toggle__bars {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 18px;
  }

  .crm-nav-toggle__bars span {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  body.crm-nav-open .crm-nav-toggle__bars span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  body.crm-nav-open .crm-nav-toggle__bars span:nth-child(2) {
    opacity: 0;
  }

  body.crm-nav-open .crm-nav-toggle__bars span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .crm-page-title {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.02rem;
    margin: 0;
    min-width: 0;
    width: 100%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .crm-nav-toggle {
    justify-self: start;
  }

  .crm-page-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
  }

  .crm-page-actions-group {
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    gap: 0.35rem;
  }

  .crm-page-actions .btn {
    min-height: 2.35rem;
    padding: 0.4rem 0.65rem;
    font-size: 0.82rem;
  }

  /* Views – kein Overflow nach außen */
  .crm-view,
  .crm-view--fill {
    max-width: 100%;
    overflow-x: hidden;
  }

  .crm-view--fill > .crm-layout,
  .crm-layout {
    padding: 0.5rem var(--mobile-pad-r) var(--mobile-pad-b) var(--mobile-pad);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  /* Zentrierte Inhalts-Spalte (To-dos, Aufgaben, Termine, …) */
  .tasks-shell,
  .todos-shell,
  #viewAppointments .appointments-layout,
  .tracking-layout > .panel,
  .revenue-tracking-layout > .panel,
  .crm-single-panel {
    width: 100%;
    max-width: var(--mobile-content-max);
    margin-left: auto;
    margin-right: auto;
  }

  #viewTodos .todos-layout,
  #viewTasks .tasks-layout {
    padding-left: var(--mobile-pad);
    padding-right: var(--mobile-pad-r);
  }

  #viewPipeline #crmApp.crm-layout {
    padding-left: var(--mobile-pad);
    padding-right: var(--mobile-pad-r);
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  #viewPipeline.crm-view--fill {
    overflow: hidden;
    min-height: 0;
  }

  /* Pipeline: Kanban horizontal wischen, Spalten vertikal scrollen */
  #viewPipeline .board-section {
    flex: 1;
    min-height: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  #viewPipeline .pipeline-board {
    flex: 1;
    min-height: 0;
    max-height: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    width: max-content;
    min-width: 100%;
    padding: 0.5rem;
    gap: 0.65rem;
    -webkit-overflow-scrolling: touch;
  }

  #viewPipeline .phase-column {
    flex: 0 0 min(260px, 78vw);
    width: min(260px, 78vw);
    min-width: min(260px, 78vw);
    max-width: none;
    max-height: 100%;
    min-height: 0;
    padding: 0.55rem 0.5rem 0.5rem;
  }

  .phase-name {
    font-size: 0.92rem;
  }

  .phase-meta {
    font-size: 0.75rem;
  }

  .deal-card {
    padding: 0.65rem 0.7rem;
    min-width: 0;
    overflow: visible;
  }

  #viewPipeline .phase-dropzone {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .deal-card h4 {
    font-size: 0.92rem;
    word-break: break-word;
  }

  .deal-company,
  .deal-meta,
  .deal-contact,
  .deal-audit {
    font-size: 0.78rem;
    word-break: break-word;
  }

  .pipeline-topbar-details {
    max-width: 100%;
  }

  .pipeline-topbar-body {
    max-width: 100%;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .stat-card {
    padding: 0.55rem 0.5rem;
    min-width: 0;
  }

  .stat-card p {
    font-size: 0.72rem;
    margin: 0 0 0.2rem;
  }

  .stat-card strong {
    font-size: 0.95rem;
    word-break: break-word;
  }

  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    max-width: 100%;
  }

  .filter-group,
  .filter-group select,
  .filter-group input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .filter-actions {
    flex-wrap: wrap;
    width: 100%;
  }

  .filter-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Panels & Tabellen */
  .panel {
    padding: 0.75rem 0.7rem;
    min-width: 0;
  }

  .panel-head,
  .panel-head--split {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .panel-head h2 {
    font-size: 1rem;
    text-align: center;
  }

  .panel-head--split input[type="search"] {
    width: 100%;
    max-width: 100%;
  }

  .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .customers-table,
  .products-table,
  .projects-table,
  .revenue-tracking-table {
    min-width: 0;
    font-size: 0.82rem;
  }

  .customers-table-wrap,
  .products-table-wrap {
    max-width: 100%;
  }

  /* Modals Vollbild-ähnlich */
  dialog.modal {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: none;
  }

  dialog.modal::backdrop {
    background: rgba(15, 23, 42, 0.5);
  }

  .modal-card {
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

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

  .modal-actions,
  .modal-actions--split {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .modal-actions__end {
    width: 100%;
    flex-direction: column;
  }

  .modal-actions .btn {
    width: 100%;
    min-height: 2.75rem;
  }

  .entity-task-sheet {
    width: 100%;
    max-width: 100%;
    max-height: 100dvh;
    border-radius: 0;
  }

  .deal-task-quick-form__row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .deal-task-quick-form__submit {
    width: 100%;
    min-height: 2.75rem;
  }

  .deal-tasks-mini-list {
    max-width: 100%;
  }

  .pipeline-topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    max-width: 100%;
  }

  .pipeline-topbar-summary {
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  /* Aufgaben, To-dos, Termine */
  .tasks-layout,
  .todos-layout {
    padding: 0.5rem var(--mobile-pad-r) var(--mobile-pad-b) var(--mobile-pad);
  }

  .tasks-shell,
  .todos-shell {
    max-width: var(--mobile-content-max);
    gap: 0.75rem;
  }

  .tasks-hero,
  .todos-hero {
    flex-direction: column;
    align-items: stretch;
    padding: 0.85rem 0.9rem;
    text-align: center;
  }

  .tasks-hero__copy,
  .todos-hero__copy {
    width: 100%;
  }

  .tasks-hero__notify {
    width: 100%;
    max-width: 16rem;
    margin: 0 auto;
  }

  .todos-hero__title,
  .tasks-hero__title {
    font-size: 1.1rem;
  }

  .todos-hero__hint,
  .tasks-hero__hint {
    margin-left: auto;
    margin-right: auto;
  }

  .todos-date-toolbar {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }

  .tasks-stats,
  .todos-stats {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .todos-stat,
  .tasks-stat {
    padding: 0.6rem 0.35rem;
    min-width: 0;
  }

  .todos-stat__value,
  .tasks-stat__value {
    font-size: 1.2rem;
  }

  .todos-daily-item,
  .tasks-card {
    padding: 0.7rem 0.75rem;
    min-width: 0;
  }

  .todos-composer,
  .todos-admin-bar {
    max-width: 100%;
  }

  .tasks-filters {
    flex-wrap: wrap;
  }

  .tasks-filter-btn {
    min-width: calc(50% - 0.25rem);
    flex: 1 1 calc(50% - 0.25rem);
  }

  .tasks-card {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    padding: 0.85rem;
  }

  .tasks-card__actions {
    grid-column: 1 / -1;
    flex-direction: row;
  }

  .tasks-card__open {
    flex: 1;
  }

  #viewAppointments .appointments-layout {
    padding: 0.5rem var(--mobile-pad-r) var(--mobile-pad-b) var(--mobile-pad);
    max-width: var(--mobile-content-max);
    gap: 0.75rem;
  }

  .appointments-hero {
    padding: 0.9rem 0.85rem;
    text-align: center;
    align-items: center;
  }

  .appointments-hero__text h2 {
    font-size: 1.05rem;
  }

  .appointments-hero__text p {
    font-size: 0.85rem;
  }

  .appointments-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .appointments-card {
    padding: 0.9rem 0.85rem;
  }

  .appointments-footer {
    padding: 0 0.25rem;
  }

  /* Tracking / Umsatz */
  .tracking-layout,
  .revenue-tracking-layout {
    padding: 0.5rem var(--mobile-pad-r) var(--mobile-pad-b) var(--mobile-pad);
    max-width: 100%;
    overflow-x: hidden;
  }

  .tracking-toolbar,
  .revenue-tracking-toolbar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
  }

  .tracking-toolbar label,
  .revenue-tracking-toolbar label {
    width: 100%;
    text-align: center;
  }

  .revenue-dashboard {
    gap: 0.65rem;
    max-width: 100%;
  }

  .revenue-dashboard__goal-card {
    padding: 0.85rem;
  }

  .revenue-dashboard__metrics {
    gap: 0.4rem;
  }

  .revenue-dashboard__metric {
    padding: 0.55rem 0.45rem;
    text-align: center;
    min-width: 0;
  }

  .revenue-tracking-add-form {
    grid-template-columns: 1fr !important;
    padding: 0.75rem;
    gap: 0.5rem;
  }

  .revenue-tracking-recurring-fields {
    grid-template-columns: 1fr !important;
  }

  .revenue-tracking-legend {
    justify-content: center;
    gap: 0.4rem 0.65rem;
    font-size: 0.78rem;
  }

  .active-projects-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .products-layout,
  .products-list-panel,
  .products-detail-panel {
    max-width: 100%;
    min-width: 0;
  }

  .pipeline-winloss__bars {
    max-width: 100%;
    padding: 0;
  }

  .pipeline-winloss__bar-label {
    font-size: 0.72rem;
    word-break: break-word;
  }

  /* Leads-Seite */
  .leads-page-body .crm-main {
    overflow-x: hidden;
  }

  .leads-page-actions {
    flex-wrap: wrap;
    gap: 0.35rem;
    width: 100%;
  }

  .leads-page-actions .btn {
    font-size: 0.8rem;
    padding: 0.4rem 0.55rem;
  }

  .leads-app {
    padding: 0.45rem var(--mobile-pad-r) var(--mobile-pad-b) var(--mobile-pad);
    gap: 0.55rem;
    max-width: 100%;
    overflow-x: hidden;
  }

  .leads-sidebar {
    max-width: 100%;
    min-width: 0;
  }

  .leads-workspace {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .leads-sheet-wrap {
    max-width: 100%;
    overflow: hidden;
  }

  .lead-sheet-table {
    display: block;
    max-width: 100%;
  }

  .leads-sheet-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .leads-col-actions {
    position: sticky;
    right: 0;
  }

  /* Login – zentriert, nichts über den Rand */
  body.crm-login-body {
    overflow-x: hidden;
    max-width: 100%;
    min-height: 100dvh;
    margin: 0;
  }

  body.crm-login-body .login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: max(0.75rem, env(safe-area-inset-top))
      max(0.75rem, env(safe-area-inset-right))
      max(0.75rem, env(safe-area-inset-bottom))
      max(0.75rem, env(safe-area-inset-left));
    box-sizing: border-box;
    overflow-x: hidden;
  }

  body.crm-login-body .login-card {
    width: 100%;
    max-width: min(22rem, 100%);
    margin: 0 auto;
    padding: 1.25rem 1.1rem;
    box-sizing: border-box;
    overflow: hidden;
  }

  body.crm-login-body .brand-block,
  body.crm-login-body .login-form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  body.crm-login-body .brand-block h1 {
    font-size: 1.2rem;
    line-height: 1.3;
    margin: 0.55rem 0 0.4rem;
    text-align: center;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  body.crm-login-body .brand-block p,
  body.crm-login-body .hint-message,
  body.crm-login-body .error-message {
    text-align: center;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
  }

  body.crm-login-body .brand-pill {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  body.crm-login-body .login-form label,
  body.crm-login-body .login-form input,
  body.crm-login-body .login-form button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  body.crm-login-body .login-form button {
    margin-top: 0.15rem;
  }

  /* Global search in sidebar – volle Breite */
  .crm-global-search__results {
    left: 0.75rem;
    right: 0.75rem;
    max-width: calc(100% - 1.5rem);
  }

  .crm-app-toast {
    left: var(--mobile-pad);
    right: var(--mobile-pad-r);
    max-width: calc(100% - var(--mobile-pad) - var(--mobile-pad-r));
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .tag,
  .tag-list {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .tag {
    font-size: 0.72rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Sehr kleine Displays */
@media (max-width: 480px) {
  :root {
    --mobile-content-max: 100%;
  }

  .stats-grid,
  .tasks-stats,
  .todos-stats {
    grid-template-columns: 1fr;
  }

  .crm-page-title {
    font-size: 0.95rem;
  }

  .appointments-card__body h3 {
    font-size: 0.98rem;
  }

  .tasks-filter-btn {
    min-width: 100%;
    flex: 1 1 100%;
  }

  .crm-page-actions .btn {
    width: 100%;
  }

  #toolbarPipeline {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  #toolbarPipeline .btn {
    width: 100%;
  }

  .leads-page-actions .btn {
    flex: 1 1 calc(50% - 0.2rem);
    min-width: 0;
  }

  .leads-save-status {
    width: 100%;
    text-align: center;
  }
}

/* Desktop: Schließen-Button & Hamburger ausblenden */
@media (min-width: 901px) {
  .crm-nav-toggle,
  .crm-sidebar-close,
  .crm-nav-backdrop {
    display: none !important;
  }
}