@media (max-width: 768px) {
        :root {
          --mobile-nav-height: 64px;
          --mobile-card-gap: 9px;
          --mobile-card-padding: 10px;
        }

        html,
        body {
          width: 100%;
          max-width: 100%;
          min-height: 100dvh;
          overflow-x: hidden !important;
          overscroll-behavior-x: none;
        }

        body {
          font-size: 13px;
        }

        .app-container,
        .main-content,
        .content-area,
        .page-section,
        .card,
        .card-body {
          min-width: 0;
          max-width: 100%;
        }

        .app-container {
          min-height: 100dvh;
        }

        /* 01. Navigatie mobila fixa jos ------------------------------------ */
        .sidebar {
          position: fixed !important;
          inset: auto 0 0 0 !important;
          z-index: 1300 !important;
          display: block !important;
          width: 100% !important;
          height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)) !important;
          min-height: 0 !important;
          padding: 0 !important;
          transform: none !important;
          border: 0 !important;
          border-top: 1px solid var(--border-color) !important;
          background: color-mix(in srgb, var(--sidebar-bg) 94%, transparent) !important;
          box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.2);
          backdrop-filter: blur(18px);
          -webkit-backdrop-filter: blur(18px);
          overflow: hidden !important;
        }

        .sidebar-header,
        .sidebar-footer,
        .sidebar-overlay,
        .mobile-menu-btn {
          display: none !important;
        }

        .sidebar-nav {
          display: flex !important;
          flex-flow: row nowrap !important;
          align-items: stretch !important;
          gap: 3px !important;
          width: 100%;
          height: 100%;
          padding: 4px 6px calc(4px + env(safe-area-inset-bottom)) !important;
          overflow-x: auto !important;
          overflow-y: hidden !important;
          touch-action: pan-x !important;
          overscroll-behavior-inline: contain;
          scroll-snap-type: none !important;
          scroll-behavior: auto;
          scrollbar-width: none;
          -webkit-overflow-scrolling: touch;
        }

        .sidebar-nav::-webkit-scrollbar,
        .mobile-action-scroll::-webkit-scrollbar,
        .calendar-view-switch::-webkit-scrollbar {
          display: none;
        }

        .sidebar-nav .nav-item {
          display: flex !important;
          flex: 0 0 66px !important;
          width: 66px !important;
          min-width: 66px !important;
          height: 55px !important;
          min-height: 55px !important;
          margin: 0 !important;
          padding: 5px 3px !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 3px !important;
          border: 0 !important;
          border-radius: 10px !important;
          color: var(--text-muted) !important;
          background: transparent !important;
          scroll-snap-align: none !important;
          touch-action: pan-x !important;
          white-space: normal !important;
          text-align: center;
          line-height: 1.05;
          user-select: none;
          -webkit-tap-highlight-color: transparent;
        }

        .sidebar-nav .nav-item i {
          width: auto !important;
          margin: 0 !important;
          font-size: 16px !important;
          line-height: 1 !important;
        }

        .sidebar-nav .nav-item span {
          display: -webkit-box !important;
          max-width: 62px;
          overflow: hidden;
          font-size: 9.5px !important;
          line-height: 1.05 !important;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }

        .sidebar-nav .nav-item.active,
        .sidebar-nav .nav-item.mobile-profile-active {
          color: var(--text-primary) !important;
          background: color-mix(in srgb, var(--primary) 22%, transparent) !important;
          box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 42%, transparent);
        }

        /* 02. Antet mobil compact ------------------------------------------ */
        .main-content {
          width: 100% !important;
          min-height: 100dvh !important;
          margin: 0 !important;
          padding: 0 0 calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)) !important;
        }

        .top-header {
          position: sticky;
          top: 0;
          z-index: 900;
          display: flex !important;
          width: 100%;
          min-height: calc(52px + env(safe-area-inset-top));
          padding: calc(8px + env(safe-area-inset-top)) 12px 8px !important;
          align-items: center !important;
          justify-content: flex-start !important;
          background: color-mix(in srgb, var(--bg-primary) 94%, transparent) !important;
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
        }

        .top-header > div:first-child,
        .header-title {
          min-width: 0;
          max-width: 100%;
        }

        .header-title h1,
        #pageTitle {
          display: block;
          max-width: calc(100vw - 24px);
          margin: 0 !important;
          overflow: hidden;
          font-size: 18px !important;
          line-height: 1.2 !important;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .header-title p,
        #pageSubtitle,
        .header-actions,
        .global-search,
        .user-avatar {
          display: none !important;
        }

        .content-area {
          width: 100% !important;
          padding: 10px !important;
          overflow: visible !important;
        }

        /* 03. Densitate generala ------------------------------------------- */
        .card {
          border-radius: 12px !important;
        }

        .card-header {
          min-height: 42px !important;
          padding: 9px 11px !important;
          font-size: 14px !important;
        }

        .card-body {
          padding: var(--mobile-card-padding) !important;
        }

        .toolbar,
        .filters-panel,
        .filter-panel,
        #financeFilterPanel {
          gap: 8px !important;
          margin-bottom: 9px !important;
          padding: 9px !important;
          border-radius: 11px !important;
        }

        .toolbar {
          flex-flow: row wrap !important;
          align-items: center !important;
        }

        .toolbar .search-box,
        .toolbar > .search-box {
          flex: 1 1 150px !important;
          width: auto !important;
          min-width: 0 !important;
        }

        .toolbar .btn,
        .toolbar-actions .btn {
          width: auto !important;
          min-width: 0 !important;
          min-height: 40px !important;
          padding: 8px 11px !important;
          font-size: 12px !important;
        }

        .filters-grid,
        .finance-filters-grid,
        .settings-grid {
          grid-template-columns: minmax(0, 1fr) !important;
          gap: 8px !important;
        }

        /* 04. Dashboard ----------------------------------------------------- */
        #dashboard .dashboard-grid {
          display: flex !important;
          flex-direction: column !important;
          gap: var(--mobile-card-gap) !important;
          padding: 0 !important;
          background: transparent !important;
        }

        #dashboard .dashboard-main-column,
        #dashboard .dashboard-side-column {
          display: contents !important;
        }

        #dashboard .dashboard-focus-section {
          display: none !important;
        }

        #dashboard .dashboard-combined-body {
          display: block !important;
          min-height: 0 !important;
          padding: 11px !important;
        }

        #dashboard .dashboard-time-section,
        #dashboard .dashboard-time-body {
          width: 100% !important;
          min-height: 0 !important;
          padding: 0 !important;
          border: 0 !important;
        }

        #dashboard .dashboard-time-body {
          display: grid !important;
          grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
          gap: 10px !important;
          align-items: center !important;
        }

        #dashboard .dashboard-greeting {
          font-size: clamp(18px, 6vw, 25px) !important;
          font-weight: 400 !important;
          line-height: 1.1 !important;
        }

        #dashboard .dashboard-clock-panel {
          align-items: flex-end !important;
          text-align: right !important;
        }

        #dashboard .dashboard-live-clock {
          font-size: clamp(19px, 6.2vw, 27px) !important;
          font-weight: 400 !important;
          line-height: 1.05 !important;
          letter-spacing: 0 !important;
        }

        #dashboard .dashboard-full-date {
          margin-top: 4px !important;
          font-size: 11px !important;
          line-height: 1.25 !important;
        }

        #dashboard .project-item {
          display: grid !important;
          grid-template-columns: 8px minmax(0, 1fr) auto !important;
          gap: 4px 8px !important;
          min-height: 0 !important;
          padding: 9px 2px !important;
          align-items: center !important;
        }

        #dashboard .project-dot {
          grid-row: 1 / span 2;
          align-self: center;
        }

        #dashboard .project-info {
          min-width: 0;
          padding: 0 !important;
          text-align: left;
        }

        #dashboard .project-name {
          font-size: 13px !important;
          line-height: 1.25 !important;
        }

        #dashboard .project-client,
        #dashboard .project-stage-phase {
          margin-top: 2px !important;
          font-size: 10.5px !important;
          line-height: 1.25 !important;
        }

        #dashboard .project-tags {
          display: grid !important;
          grid-template-columns: auto minmax(0, 1fr);
          grid-column: 2 / -1;
          width: 100%;
          min-width: 0;
          gap: 6px 10px;
        }

        #dashboard .dashboard-project-progress-block {
          width: 100%;
          min-width: 0;
        }

        #dashboard .dashboard-project-progress-block.without-progress {
          align-self: center;
        }

        #dashboard .dashboard-project-delivery {
          gap: 6px;
          font-size: 9.5px;
        }

        #dashboard .project-progress-inline,
        #dashboard .progress-container,
        #dashboard .progress-bar-container {
          display: none !important;
        }

        #dashboard .dashboard-deadlines-card {
          min-height: 0 !important;
        }

        #dashboard .deadline-group-body {
          max-height: 224px !important;
        }

        /* 05. Tabele prezentate ca liste de carduri ------------------------ */
        .page-section .table-container,
        .page-section .table-responsive,
        .page-section .card-body:has(> .data-table) {
          width: 100% !important;
          max-width: 100% !important;
          overflow: visible !important;
        }

        .page-section .data-table {
          display: block !important;
          width: 100% !important;
          min-width: 0 !important;
          border: 0 !important;
          background: transparent !important;
        }

        .page-section .data-table thead {
          display: none !important;
        }

        .page-section .data-table tbody {
          display: grid !important;
          grid-template-columns: minmax(0, 1fr) !important;
          gap: var(--mobile-card-gap) !important;
          width: 100% !important;
        }

        .page-section .data-table tbody tr {
          display: block !important;
          width: 100% !important;
          margin: 0 !important;
          padding: 8px 10px !important;
          overflow: hidden;
          border: 1px solid var(--border-color) !important;
          border-radius: 11px !important;
          background: color-mix(in srgb, var(--bg-card) 94%, transparent) !important;
          box-shadow: none !important;
        }

        .page-section .data-table tbody td {
          display: grid !important;
          grid-template-columns: minmax(78px, 31%) minmax(0, 1fr) !important;
          gap: 8px !important;
          width: 100% !important;
          min-width: 0 !important;
          min-height: 0 !important;
          padding: 4px 0 !important;
          align-items: start !important;
          overflow: visible !important;
          border: 0 !important;
          background: transparent !important;
          font-size: 13px !important;
          line-height: 1.25 !important;
          text-align: left !important;
          white-space: normal !important;
          overflow-wrap: anywhere;
        }

        .page-section .data-table tbody td::before {
          min-width: 0;
          color: var(--text-muted) !important;
          content: attr(data-mobile-label) !important;
          font-size: 9px !important;
          font-weight: 700 !important;
          line-height: 1.25 !important;
          text-transform: uppercase;
          letter-spacing: 0.04em;
        }

        .page-section .data-table tbody td:empty {
          display: none !important;
        }

        /* Numerele proiectelor nu se rup intre cifre. */
        #tabelProiecte .project-number-cell {
          width: 100% !important;
          max-width: none !important;
          white-space: nowrap !important;
          overflow-wrap: normal !important;
          word-break: keep-all !important;
        }

        .page-section .data-table tbody td.mobile-actions-cell {
          display: flex !important;
          flex-flow: row nowrap !important;
          gap: 6px !important;
          margin-top: 5px;
          padding-top: 8px !important;
          align-items: center !important;
          overflow-x: auto !important;
          border-top: 1px solid var(--border-color) !important;
          touch-action: pan-x;
          scrollbar-width: none;
        }

        .page-section .data-table tbody td.mobile-actions-cell::before {
          flex: 0 0 78px;
        }

        .page-section .data-table tbody td.mobile-actions-cell .btn,
        .page-section .data-table tbody td.mobile-actions-cell button:not(.status-select),
        .task-card > .btn,
        .task-list-actions .btn,
        .note-card .btn {
          display: inline-flex !important;
          flex: 0 0 32px !important;
          width: 32px !important;
          min-width: 32px !important;
          height: 32px !important;
          min-height: 32px !important;
          padding: 0 !important;
          align-items: center !important;
          justify-content: center !important;
          border-radius: 8px !important;
          font-size: 12px !important;
        }

        .page-section .data-table tbody td.mobile-actions-cell .btn.contact-email-button {
          flex-basis: 44px !important;
          width: 44px !important;
          min-width: 44px !important;
          height: 44px !important;
          min-height: 44px !important;
        }

        /* 06. Taskuri, liste si studii -------------------------------------- */
        #taskList,
        #studiiList,
        #noteList {
          gap: var(--mobile-card-gap) !important;
        }

        .task-card {
          display: flex !important;
          flex-flow: row wrap !important;
          gap: 7px !important;
          min-height: 0 !important;
          padding: 10px !important;
          align-items: center !important;
          border-radius: 11px !important;
        }

        .task-card:not(.task-list-card)::before {
          flex-basis: 100%;
          height: 0;
          order: 4;
          content: "";
        }

        .task-card > .task-checkbox,
        .task-card > .auto-task-icon {
          flex: 0 0 24px;
          order: 0;
        }

        .task-card > .task-content {
          flex: 1 1 calc(100% - 36px) !important;
          min-width: 0 !important;
          order: 1;
        }

        .task-title {
          width: 100%;
          font-size: 13px !important;
          line-height: 1.25 !important;
          overflow-wrap: anywhere;
        }

        .task-meta {
          display: block !important;
          width: 100%;
          margin-top: 3px !important;
          font-size: 10.5px !important;
          line-height: 1.35 !important;
          white-space: normal !important;
          overflow-wrap: anywhere;
        }

        .task-card > .task-overdue,
        .task-card > .study-deadline,
        .task-card > .task-priority {
          flex: 0 1 auto;
          order: 2;
          margin: 0 !important;
          font-size: 10px !important;
        }

        .task-card:not(.task-list-card) > .btn {
          order: 5;
          margin: 0 !important;
        }

        .task-card:not(.task-list-card) > .task-priority + .btn {
          margin-left: auto !important;
        }

        .task-list-card {
          display: block !important;
        }

        .task-list-card-header {
          display: flex !important;
          flex-wrap: wrap !important;
          gap: 7px !important;
          padding: 0 !important;
        }

        .task-list-card-header .task-content {
          flex: 1 1 calc(100% - 36px) !important;
          min-width: 0;
        }

        .task-list-actions {
          display: flex !important;
          flex: 1 0 100% !important;
          gap: 6px !important;
          justify-content: flex-end !important;
          overflow-x: auto !important;
          touch-action: pan-x;
        }

        .task-subitems {
          padding: 7px 0 0 30px !important;
        }

        .study-deadline {
          display: inline-flex !important;
          flex-direction: column;
          align-items: flex-start !important;
        }

        /* 07. Note ---------------------------------------------------------- */
        .note-card {
          padding: 10px !important;
          border-radius: 11px !important;
        }

        .note-card-title {
          font-size: 14px !important;
        }

        .note-card-date,
        .note-card-project {
          font-size: 10.5px !important;
        }

        .note-card-body {
          margin-top: 7px !important;
          font-size: 12px !important;
          line-height: 1.4 !important;
          overflow-wrap: anywhere;
        }

        /* 08. Calendar mobil in stil agenda -------------------------------- */
        #calendar .toolbar {
          display: grid !important;
          grid-template-columns: minmax(0, 1fr) auto !important;
          align-items: center !important;
        }

        #calendar .toolbar > div:first-child {
          display: flex !important;
          grid-column: 1 / -1;
          gap: 6px !important;
          width: 100%;
          min-width: 0;
          align-items: center;
          overflow-x: auto;
          touch-action: pan-x;
          scrollbar-width: none;
        }

        #calendar #calendarMonth {
          flex: 1 0 126px;
          min-width: 126px !important;
          margin: 0 !important;
          font-size: 15px !important;
          text-align: center;
          white-space: nowrap;
        }

        #calendar .calendar-view-switch {
          display: flex !important;
          flex: 0 0 auto;
          gap: 3px !important;
          overflow-x: auto !important;
          touch-action: pan-x;
          scrollbar-width: none;
        }

        #calendar .calendar-view-btn {
          flex: 0 0 auto;
          min-height: 36px !important;
          padding: 6px 9px !important;
          font-size: 10.5px !important;
          white-space: nowrap;
        }

        #calendar .calendar-grid.compact-month {
          display: flex !important;
          flex-direction: column !important;
          gap: 7px !important;
          width: 100% !important;
          min-width: 0 !important;
        }

        #calendar .calendar-day-header,
        #calendar .calendar-day.other-month,
        #calendar .calendar-day:not(.has-event):not(.has-task):not(.in-project):not(.today) {
          display: none !important;
        }

        #calendar .calendar-day {
          display: grid !important;
          grid-template-columns: 42px minmax(0, 1fr) !important;
          gap: 3px 8px !important;
          width: 100% !important;
          min-width: 0 !important;
          min-height: 58px !important;
          padding: 8px !important;
          overflow: hidden !important;
          border: 1px solid var(--border-color) !important;
          border-radius: 10px !important;
          background: var(--bg-card) !important;
        }

        #calendar .calendar-day.today {
          border-color: var(--primary) !important;
          box-shadow: inset 3px 0 0 var(--primary);
        }

        #calendar .calendar-day-number {
          display: flex !important;
          grid-row: 1 / span 4;
          width: 34px;
          height: 34px;
          align-items: center;
          justify-content: center;
          border-radius: 10px;
          background: var(--bg-tertiary);
          font-size: 15px !important;
          font-weight: 700;
        }

        #calendar .calendar-events,
        #calendar .project-flow-layer,
        #calendar .calendar-day > *:not(.calendar-day-number) {
          grid-column: 2;
          min-width: 0;
          max-width: 100%;
        }

        #calendar .calendar-event,
        #calendar .calendar-task,
        #calendar .calendar-day-label,
        #calendar .project-flow-label {
          width: 100%;
          max-width: 100%;
          margin: 2px 0 !important;
          overflow: hidden;
          font-size: 10.5px !important;
          line-height: 1.25 !important;
          white-space: normal !important;
          text-overflow: ellipsis;
          overflow-wrap: anywhere;
        }

        #calendar .project-flow-bar {
          position: static !important;
          width: 100% !important;
          margin: 2px 0 !important;
          transform: none !important;
        }

        #calendar .year-calendar-grid {
          grid-template-columns: minmax(0, 1fr) !important;
        }

        #calendar .year-month-card {
          min-width: 0 !important;
        }

        /* 09. Financiar ------------------------------------------------------ */
        #financiar .finance-summary-grid,
        #financiar .stats-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          gap: 8px !important;
        }

        #financiar .stat-card,
        #financiar .finance-stat-card {
          min-height: 92px !important;
          padding: 10px !important;
        }

        #financiar #tabelTranzactii tbody tr:has(td:nth-child(5) .income),
        #financiar #tabelTranzactii tbody tr:has(td:nth-child(5) [class*="incas"]) {
          border-left: 3px solid var(--success) !important;
        }

        #financiar #tabelTranzactii tbody tr:has(td:nth-child(5) .expense),
        #financiar #tabelTranzactii tbody tr:has(td:nth-child(5) [class*="chelt"]) {
          border-left: 3px solid var(--danger) !important;
        }

        /* 10. Rapoarte si grafice ------------------------------------------ */
        #rapoarte .reports-stack {
          gap: var(--mobile-card-gap) !important;
        }

        #rapoarte .financial-chart-header {
          align-items: stretch !important;
        }

        #rapoarte .financial-chart-totals {
          order: 3;
          flex: 1 0 100%;
          justify-content: stretch;
        }

        #rapoarte .financial-chart-total {
          flex: 1 1 220px;
          justify-content: space-between;
          min-width: 0;
        }

        #rapoarte .card-body,
        #statusChart,
        #financialChart {
          width: 100% !important;
          min-width: 0 !important;
          max-width: 100% !important;
          overflow: hidden !important;
        }

        #statusChart {
          display: grid !important;
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          gap: 14px 8px !important;
        }

        #statusChart .status-donut-item {
          min-width: 0 !important;
        }

        #statusChart .status-donut-label {
          display: -webkit-box;
          max-width: 100%;
          overflow: hidden;
          font-size: 10px !important;
          line-height: 1.2 !important;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }

        #financialChart svg,
        #financialChart canvas,
        .finance-area-chart {
          display: block;
          width: 100% !important;
          min-width: 0 !important;
          max-width: 100% !important;
          height: auto !important;
          min-height: 210px;
        }

        .finance-area-chart text {
          font-size: 8px !important;
        }

        /* 11. Formulare pe o singura coloana ------------------------------- */
        .form-grid,
        .form-row,
        .form-row-3,
        .modal-body .form-grid,
        .modal-body .form-row,
        .modal-body .form-row-3,
        .project-readonly-grid {
          display: grid !important;
          grid-template-columns: minmax(0, 1fr) !important;
          gap: 9px !important;
        }

        .form-group,
        .form-row > *,
        .form-grid > * {
          width: 100% !important;
          min-width: 0 !important;
          grid-column: auto !important;
        }

        input,
        select,
        textarea,
        .form-input,
        .form-select,
        .form-textarea {
          width: 100%;
          min-width: 0;
          max-width: 100%;
          min-height: 44px;
          font-size: 16px !important;
        }

        textarea,
        .form-textarea {
          min-height: 92px;
        }

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

        /* 12. Modale pe tot ecranul ---------------------------------------- */
        .modal-overlay {
          position: fixed !important;
          inset: 0 !important;
          z-index: 2000 !important;
          width: 100% !important;
          height: 100dvh !important;
          padding: 0 !important;
          align-items: stretch !important;
          justify-content: stretch !important;
          overflow: hidden !important;
        }

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

        .modal-header {
          position: relative !important;
          z-index: 2;
          flex: 0 0 auto;
          min-height: calc(54px + env(safe-area-inset-top));
          padding: calc(12px + env(safe-area-inset-top)) 14px 11px !important;
          background: var(--bg-card) !important;
        }

        .modal-title {
          display: block;
          min-width: 0;
          max-width: calc(100vw - 62px);
          overflow: hidden;
          font-size: 16px !important;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .modal-close {
          width: 38px !important;
          min-width: 38px !important;
          height: 38px !important;
          min-height: 38px !important;
        }

        .modal-body {
          flex: 1 1 auto !important;
          min-height: 0 !important;
          padding: 11px !important;
          overflow-x: hidden !important;
          overflow-y: auto !important;
          overscroll-behavior: contain;
          -webkit-overflow-scrolling: touch;
        }

        .modal-section {
          padding: 10px !important;
        }

        .modal-footer {
          position: relative !important;
          z-index: 2;
          display: flex !important;
          flex: 0 0 auto;
          gap: 8px !important;
          min-height: calc(60px + env(safe-area-inset-bottom));
          padding: 9px 11px calc(9px + env(safe-area-inset-bottom)) !important;
          background: var(--bg-card) !important;
        }

        .modal-footer .btn {
          flex: 1 1 0;
          min-height: 42px !important;
        }

        /* 13. Centrul de control si alte layouturi late -------------------- */
        .project-center-workspace,
        .project-center-panel-grid,
        .project-center-kpis,
        .project-center-hero {
          grid-template-columns: minmax(0, 1fr) !important;
        }

        .project-center-hero,
        .project-center-panel,
        .project-center-side-card {
          padding: 11px !important;
        }

        .project-center-tabs {
          display: flex !important;
          width: 100%;
          overflow-x: auto !important;
          touch-action: pan-x;
          scrollbar-width: none;
        }

        .project-center-tab {
          flex: 0 0 auto;
        }

        /* 14. Ajustari finale de densitate pentru ecrane mobile ------------- */
        /* Bara de navigatie ocupa intotdeauna intreaga latime a viewportului. */
        body.mobile-interface-active aside#sidebar {
          left: 0 !important;
          right: 0 !important;
          width: 100vw !important;
          width: 100dvw !important;
          min-width: 100vw !important;
          min-width: 100dvw !important;
          max-width: none !important;
          margin: 0 !important;
          transform: none !important;
          box-sizing: border-box !important;
        }

        body.mobile-interface-active aside#sidebar > .sidebar-nav {
          width: 100% !important;
          min-width: 100% !important;
          max-width: none !important;
          margin: 0 !important;
          box-sizing: border-box !important;
        }

        /* Separare vizuala clara intre cardurile provenite din tabele. */
        .page-section .data-table tbody {
          row-gap: 12px !important;
        }

        /* Statusurile raman lizibile, dar nu mai domina cardul mobil. */
        .page-section .data-table .project-status-select,
        .page-section .data-table .aviz-status-select {
          width: min(100%, 150px) !important;
          min-width: 0 !important;
          max-width: 150px !important;
          height: 28px !important;
          min-height: 28px !important;
          padding: 2px 22px 2px 8px !important;
          border-radius: 14px !important;
          font-size: 10.5px !important;
          line-height: 1.15 !important;
        }

        /* In vederea lunara mobila, legenda preceda calendarul. */
        #calendar.page-section.active {
          display: flex !important;
          flex-direction: column !important;
        }

        #calendar.page-section.active > .toolbar {
          order: 1;
        }

        #calendar.page-section.active > #calendarLegend {
          order: 2;
          margin: 0 0 10px !important;
        }

        #calendar.page-section.active > .card:has(#calendarGrid) {
          order: 3;
        }

        /* Procentul progresului ramane in interiorul antetului pe mobil. */
        #projectCenter .project-center-progress-value.project-progress-percent {
          width: auto !important;
          min-width: 3ch !important;
          margin-left: auto !important;
          font-size: 20px !important;
          line-height: 1 !important;
          text-align: right !important;
        }

        /* Pictograma listei de proiecte ramane secundara si compacta. */
        .page-section .project-list-button {
          flex: 0 0 28px !important;
          width: 28px !important;
          height: 28px !important;
          min-width: 28px !important;
          min-height: 28px !important;
          padding: 0 !important;
          border-radius: 7px !important;
          font-size: 11px !important;
        }

        /* Bifa taskurilor si studiilor ramane mica, in fata titlului. */
        .task-card > .task-checkbox {
          flex: 0 0 18px !important;
          width: 18px !important;
          height: 18px !important;
          min-width: 18px !important;
          min-height: 18px !important;
          margin: 1px 0 0 !important;
          padding: 0 !important;
          align-self: flex-start !important;
          border-radius: 5px !important;
          order: 0 !important;
        }

        .task-card > .task-content {
          flex: 1 1 0 !important;
          width: auto !important;
          min-width: 0 !important;
          order: 1 !important;
        }

        /* Bifele subtaskurilor sunt mici si raman imediat inaintea textului. */
        .task-subitem .task-checkbox {
          flex: 0 0 16px !important;
          width: 16px !important;
          height: 16px !important;
          min-width: 16px !important;
          min-height: 16px !important;
          margin: 0 !important;
          padding: 0 !important;
          border-radius: 4px !important;
        }

        .task-subitem .task-checkbox i {
          font-size: 8px !important;
        }

        /* 15. Liste fara fundal comun; fiecare inregistrare ramane card ----- */
        #proiecte .card:has(> #tabelProiecte),
        #evenimentePage .card:has(> #tabelEvenimente),
        #avize .card:has(> #tabelAvize),
        #clienti .card:has(> #tabelClienti),
        #colaboratori .card:has(> #tabelColaboratori),
        #echipa .card:has(> #tabelEchipa),
        #arhiva .card:has(> #tabelArhiva),
        #financiar .card:has(#tabelTranzactii) {
          overflow: visible !important;
          border: 0 !important;
          border-radius: 0 !important;
          background: transparent !important;
          box-shadow: none !important;
        }

        #financiar .card:has(#tabelTranzactii) > .card-header {
          min-height: 0 !important;
          padding: 0 0 8px !important;
          border: 0 !important;
          background: transparent !important;
        }

        #financiar .card:has(#tabelTranzactii) > .card-body {
          padding: 0 !important;
          background: transparent !important;
        }

        #tabelProiecte tbody,
        #tabelEvenimente tbody,
        #tabelAvize tbody,
        #tabelClienti tbody,
        #tabelColaboratori tbody,
        #tabelEchipa tbody,
        #tabelTranzactii tbody,
        #tabelArhiva tbody {
          overflow: visible !important;
          padding: 0 !important;
          border: 0 !important;
          border-radius: 0 !important;
          background: transparent !important;
          box-shadow: none !important;
        }

        /* Studiile folosesc randuri complete, fara coloane inghesuite. */
        #studiiList .task-card {
          align-items: flex-start !important;
        }

        #studiiList .task-card > .task-content {
          flex: 1 1 calc(100% - 27px) !important;
          width: calc(100% - 27px) !important;
        }

        #studiiList .task-card > .study-deadline,
        #studiiList .task-card > .task-priority {
          flex: 0 0 calc(100% - 27px) !important;
          width: calc(100% - 27px) !important;
          max-width: calc(100% - 27px) !important;
          margin-left: 27px !important;
        }

        #studiiList .task-card > .task-priority {
          justify-content: flex-start !important;
        }

        /* Nu permitem elementelor media sa largeasca viewportul. */
        img,
        svg,
        canvas,
        video {
          max-width: 100%;
        }
      }

      @media (max-width: 359px) {
        .sidebar-nav .nav-item {
          flex-basis: 62px !important;
          width: 62px !important;
          min-width: 62px !important;
        }

        .page-section .data-table tbody td {
          grid-template-columns: 72px minmax(0, 1fr) !important;
        }
      }

      @media (max-width: 768px) and (orientation: landscape) {
        :root {
          --mobile-nav-height: 58px;
        }

        .sidebar-nav .nav-item {
          height: 49px !important;
          min-height: 49px !important;
        }

        #dashboard .dashboard-time-body {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }

        .modal-header {
          min-height: calc(48px + env(safe-area-inset-top));
          padding-top: calc(8px + env(safe-area-inset-top)) !important;
        }
      }

      @media (max-width: 768px) and (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          scroll-behavior: auto !important;
          animation-duration: 0.001ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.001ms !important;
        }
      }