/* ========================================================================
      CSS 08 - RESPONSIVE PARTAJAT SI DASHBOARD
      Reguli comune desktop/mobil care depind de latimea efectiva a continutului.
      ======================================================================== */
      /* Aceiași indicatori circulari pe desktop și mobil; datele rămân comune. */
      #dashboard .dashboard-overview-card .card-header {
        padding-bottom: 5px !important;
        border-bottom: 0 !important;
      }

      #dashboard .dashboard-overview-card .card-header i,
      #dashboard .dashboard-overview-chart {
        display: none !important;
      }

      #dashboard .dashboard-overview-body {
        min-height: 0 !important;
        padding-top: 3px !important;
      }

      #dashboard .dashboard-overview-legend {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 330px !important;
        gap: 8px !important;
        align-items: center !important;
        justify-items: center !important;
      }

      #dashboard .dashboard-overview-legend-item {
        position: relative;
        display: flex !important;
        width: min(100%, 96px) !important;
        min-width: 0 !important;
        min-height: 0 !important;
        aspect-ratio: 1;
        padding: 11px 8px !important;
        border: 0 !important;
        border-radius: 50% !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        text-align: center !important;
        background:
          radial-gradient(circle, var(--bg-card) 0 62%, transparent 63%),
          conic-gradient(
            from -90deg,
            var(--overview-color) 0 74%,
            color-mix(in srgb, var(--overview-color) 14%, var(--border-color)) 74% 100%
          ) !important;
        box-shadow:
          0 7px 18px color-mix(in srgb, var(--overview-color) 12%, transparent),
          inset 0 0 16px color-mix(in srgb, var(--overview-color) 7%, transparent);
        opacity: 0;
        transform: scale(0.82);
        animation: dashboardOverviewCircleIn 0.42s ease-out calc(0.08s + var(--overview-delay, 0s)) forwards !important;
      }

      #dashboard .dashboard-overview-legend-item + .dashboard-overview-legend-item::before {
        display: none !important;
      }

      #dashboard .dashboard-overview-legend-item::after {
        position: absolute;
        inset: -2px;
        z-index: 0;
        border: 2px solid transparent;
        border-top-color: var(--overview-color);
        border-right-color: color-mix(in srgb, var(--overview-color) 50%, transparent);
        border-radius: 50%;
        content: "";
        pointer-events: none;
        animation: dashboardOverviewCircleSpin 4.5s linear infinite;
      }

      #dashboard .dashboard-overview-legend-dot {
        display: none !important;
      }

      #dashboard .dashboard-overview-legend-value,
      #dashboard .dashboard-overview-legend-label {
        position: relative;
        z-index: 1;
      }

      #dashboard .dashboard-overview-legend-value {
        font-size: 19px !important;
        line-height: 1 !important;
      }

      #dashboard .dashboard-overview-legend-label {
        display: -webkit-box;
        max-width: 72px;
        overflow: hidden;
        font-size: 9.5px !important;
        line-height: 1.08 !important;
        text-align: center !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      @keyframes dashboardOverviewCircleIn {
        to { opacity: 1; transform: scale(1); }
      }

      @keyframes dashboardOverviewCircleSpin {
        to { transform: rotate(360deg); }
      }

      body.animations-disabled #dashboard .dashboard-overview-legend-item {
        opacity: 1;
        transform: none;
        animation: none !important;
      }

      body.animations-disabled #dashboard .dashboard-overview-legend-item::after {
        animation: none !important;
      }

      @media (prefers-reduced-motion: reduce) {
        #dashboard .dashboard-overview-legend-item {
          opacity: 1;
          transform: none;
          animation: none !important;
        }

        #dashboard .dashboard-overview-legend-item::after {
          animation: none !important;
        }
      }

      @media (max-width: 359px) {
        #dashboard .dashboard-overview-legend-item {
          padding-inline: 5px !important;
        }
      }

      /* Adaptare la lățimea efectivă a casetelor, inclusiv la comutarea sidebarului. */
      @media (min-width: 1025px) {
        .main-content:has(#dashboard.active) {
          min-width: 0;
        }

        #dashboard .dashboard-main-column {
          container: dashboard-main / inline-size;
        }

        #dashboard .dashboard-projects-card {
          container: dashboard-projects / inline-size;
        }

        @container dashboard-projects (max-width: 760px) {
          #recentProjects .project-item {
            display: grid;
            grid-template-columns: 10px minmax(0, 1fr);
            gap: 8px 12px;
            align-items: center;
          }

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

          #recentProjects .project-info {
            min-width: 0;
            padding: 3px 0;
            margin: -3px 0;
          }

          #recentProjects .project-name,
          #recentProjects .project-client,
          #recentProjects .project-stage-phase {
            overflow-wrap: break-word;
            word-break: normal;
          }

          #recentProjects .project-tags {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            grid-column: 2;
            width: 100%;
            min-width: 0;
            gap: 8px 12px;
          }

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

          #recentProjects .dashboard-project-delivery {
            flex-wrap: wrap;
            gap: 4px 8px;
          }
        }

        @container dashboard-main (max-width: 650px) {
          #dashboard .dashboard-combined-body {
            grid-template-columns: minmax(0, 1fr) 214px;
            gap: 12px;
            min-height: 220px;
            padding: 16px;
          }

          #dashboard .dashboard-time-section {
            padding-right: 12px;
          }

          #dashboard .dashboard-greeting,
          #dashboard .dashboard-live-clock {
            font-size: 28px;
          }

          #dashboard .dashboard-full-date {
            margin-top: 10px;
            font-size: 14px;
          }

          #dashboard .dashboard-focus-body {
            grid-template-columns: 130px minmax(0, 1fr);
            gap: 8px;
            width: 100%;
          }

          #dashboard .focus-timer-progress {
            width: 130px;
            height: 130px;
            flex-basis: 130px;
          }

          #dashboard .focus-timer-remaining {
            font-size: 28px;
          }

          #dashboard .focus-timer-center {
            gap: 7px;
          }

          #dashboard .focus-timer-toggle {
            min-width: 70px;
            min-height: 28px;
            padding: 4px 10px;
            font-size: 11px;
          }

          #dashboard .focus-timer-settings {
            width: 100%;
            min-width: 0;
            max-width: none;
            gap: 10px;
          }

          #dashboard .focus-timer-title {
            font-size: 12px;
            white-space: normal;
          }

          #dashboard .focus-duration-group .form-label,
          #dashboard .focus-duration-unit,
          #dashboard .focus-reset-button {
            font-size: 11px;
          }

          #dashboard .focus-duration-input,
          #dashboard .focus-reset-button {
            width: 100%;
          }
        }

        @container dashboard-main (max-width: 420px) {
          #dashboard .dashboard-combined-body {
            grid-template-columns: minmax(0, 1fr);
            gap: 16px;
          }

          #dashboard .dashboard-time-section {
            padding: 0 0 16px;
            border-right: 0;
            border-bottom: 1px solid var(--border);
          }

          #dashboard .dashboard-time-body {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            align-items: center;
            gap: 12px;
          }

          #dashboard .dashboard-clock-panel {
            text-align: right;
          }

          #dashboard .dashboard-focus-section {
            justify-content: center;
          }

          #dashboard .dashboard-focus-body {
            grid-template-columns: 150px 104px;
            gap: 16px;
            width: 270px;
            margin: 0;
          }

          #dashboard .focus-timer-progress {
            width: 150px;
            height: 150px;
            flex-basis: 150px;
          }
        }
      }

      @media (max-width: 1024px) {
        #dashboard .dashboard-main-column,
        #dashboard .dashboard-side-column {
          display: contents;
        }

        #dashboard .dashboard-projects-card {
          display: none !important;
        }

        /* Tranzactiile devin carduri etichetate inainte ca tabelul sa fie inghesuit. */
        #financiar .card:has(#tabelTranzactii) {
          overflow: visible;
        }
        #financiar .card:has(#tabelTranzactii) > .card-body {
          overflow: visible;
        }
        #tabelTranzactii {
          display: block !important;
          width: 100%;
        }
        #tabelTranzactii thead {
          display: none;
        }
        #tabelTranzactii tbody {
          display: grid;
          gap: 12px;
          width: 100%;
        }
        #tabelTranzactii tbody tr {
          display: block;
          padding: 14px 16px;
          border: 1px solid var(--border);
          border-radius: 12px;
          background: var(--bg-card);
          box-shadow: var(--shadow);
        }
        #tabelTranzactii tbody td {
          display: grid;
          grid-template-columns: minmax(130px, 34%) minmax(0, 1fr);
          gap: 12px;
          align-items: center;
          width: 100%;
          padding: 9px 0;
          border-bottom: 1px solid var(--border);
          overflow-wrap: anywhere;
          white-space: normal;
        }
        #tabelTranzactii tbody td:last-child {
          border-bottom: 0;
        }
        #tabelTranzactii tbody td::before {
          font-size: 11px;
          font-weight: 700;
          line-height: 1.25;
          text-transform: uppercase;
          letter-spacing: 0.04em;
          color: var(--text-secondary);
        }
        #tabelTranzactii td:nth-child(1)::before { content: "Proiect"; }
        #tabelTranzactii td:nth-child(2)::before { content: "Client"; }
        #tabelTranzactii td:nth-child(3)::before { content: "Fază"; }
        #tabelTranzactii td:nth-child(4)::before { content: "Valoare contract"; }
        #tabelTranzactii td:nth-child(5)::before { content: "Tip tranzacție"; }
        #tabelTranzactii td:nth-child(6)::before { content: "Sumă"; }
        #tabelTranzactii td:nth-child(7)::before { content: "Data"; }
        #tabelTranzactii td:nth-child(8)::before { content: "Descriere"; }
        #tabelTranzactii td:nth-child(9)::before { content: "Acțiuni"; }

        #tabelTranzactii .table-row-actions,
        #tabelAvize .table-row-actions {
          display: flex;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: flex-start;
          gap: 8px;
          min-width: 0;
        }
        #tabelTranzactii .table-row-actions .btn,
        #tabelAvize .table-row-actions .btn {
          display: inline-flex;
          flex: 0 0 34px;
          align-items: center;
          justify-content: center;
          width: 34px;
          height: 34px;
          min-width: 34px;
          padding: 0;
          margin: 0;
          border-radius: 8px;
        }

        /* Avizele folosesc acelasi model lizibil de card pe tableta. */
        #avize .card:has(#tabelAvize),
        #avize .card:has(#tabelAvize) > .card-body {
          overflow: visible;
        }
        #tabelAvize {
          display: block !important;
          width: 100%;
        }
        #tabelAvize thead {
          display: none;
        }
        #tabelAvize tbody {
          display: grid;
          gap: 12px;
          width: 100%;
        }
        #tabelAvize tbody tr {
          display: block;
          padding: 14px 16px;
          border: 1px solid var(--border);
          border-radius: 12px;
          background: var(--bg-card);
          box-shadow: var(--shadow);
        }
        #tabelAvize tbody td {
          display: grid;
          grid-template-columns: minmax(150px, 36%) minmax(0, 1fr);
          gap: 12px;
          align-items: center;
          width: 100%;
          padding: 9px 0;
          border-bottom: 1px solid var(--border);
          overflow-wrap: anywhere;
          white-space: normal;
        }
        #tabelAvize tbody td:last-child {
          border-bottom: 0;
        }
        #tabelAvize tbody td::before {
          font-size: 11px;
          font-weight: 700;
          line-height: 1.25;
          text-transform: uppercase;
          letter-spacing: 0.04em;
          color: var(--text-secondary);
        }
        #tabelAvize td:nth-child(1)::before { content: "Instituție"; }
        #tabelAvize td:nth-child(2)::before { content: "Tip aviz"; }
        #tabelAvize td:nth-child(3)::before { content: "Proiect"; }
        #tabelAvize td:nth-child(4)::before { content: "Număr și data înregistrării"; }
        #tabelAvize td:nth-child(5)::before { content: "Status"; }
        #tabelAvize td:nth-child(6)::before { content: "Data depunerii"; }
        #tabelAvize td:nth-child(7)::before { content: "Zile de la depunere"; }
        #tabelAvize td:nth-child(8)::before { content: "Acțiuni"; }
      }

      /* Starea de întârziere trebuie să rămână roșie în toate temele și la toate rezoluțiile. */
      .task-card .task-email-btn.overdue-email-btn,
      .task-card .task-email-btn.overdue-email-btn i,
      body.dark-mode .task-card .task-email-btn.overdue-email-btn,
      body.dark-mode .task-card .task-email-btn.overdue-email-btn i {
        color: var(--danger) !important;
      }
      .task-card .task-email-btn.overdue-email-btn {
        border-color: color-mix(in srgb, var(--danger) 62%, var(--border)) !important;
      }

      @media (max-width: 768px) {
        #tabelEvenimente .recurring-series-table-summary td {
          display: block !important;
          padding: 12px !important;
        }
        #tabelEvenimente .recurring-series-table-summary td::before {
          content: none !important;
        }
      }