/* ==========================================================================
CUPRINS CSS
01. Tema si reset
02. Layout global: sidebar, header si continut
03. Componente reutilizabile
04. Pagini si module functionale
05. Stari responsive si dark mode

STRATURI CSS INCARCATE DUPA NUCLEU
06. Module si override-uri punctuale       - id: arhinode-module-overrides
07. Interfata mobila                       - id: arhinode-mobile-interface
08. Responsive partajat si dashboard      - id: arhinode-dashboard-overview-shared
========================================================================== */
      /* 01. TEMA SI RESET -------------------------------------------------------- */
      :root {
        --bg-main: #f3f2f4;
        --bg-card: #ffffff;
        --bg-soft-green: #d8e9e6;
        --bg-soft: #d8e9e6;
        --sidebar-bg: #0b4a4a;
        --sidebar-hover: #155d5a;
        --sidebar-active: #1d6f6a;
        --text-primary: #171717;
        --text-secondary: #6f7f7d;
        --text-muted: #94a19f;
        --border: #e6e7e8;
        --border-strong: #c9d2d0;
        --accent-primary: #0b4a4a;
        --accent-secondary: #1d6f6a;
        --accent-soft: #d8e9e6;
        --complement: #c95a4a;
        --complement-soft: #f8e4e0;
        --primary: #0b4a4a;
        --primary-hover: #083a3a;
        --primary-soft: #d8e9e6;
        --sidebar: #0b4a4a;
        --accent: #0b4a4a;
        --accent-light: #d8e9e6;
        --success: #2e8b7a;
        --success-soft: #dff0ec;
        --warning: #6fbf5e;
        --warning-soft: #e9f7e4;
        --danger: #c95a4a;
        --danger-soft: #f8e4e0;
        --info: #1d6f6a;
        --info-soft: #d8e9e6;
        --purple: #5e5ac8;
        --purple-soft: #ecebfa;
        --calendar-task: #2e8b7a;
        --weekend-bg: #eceeef;
        --shadow: 0 1px 3px rgba(11, 74, 74, 0.08), 0 10px 28px rgba(11, 74, 74, 0.06);
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: "Inter", sans-serif;
        background: var(--bg-main);
        color: var(--text-primary);
        overflow-x: auto;
      }

      body.dark-mode {
        --sidebar: #062e34;
        --sidebar-bg: #062e34;
        --sidebar-hover: #0b4a4a;
        --sidebar-active: #155d5a;
        --accent: #2e8b7a;
        --accent-light: #123c40;
        --primary: #2e8b7a;
        --primary-hover: #1d6f6a;
        --primary-soft: #123c40;
        --weekend-bg: #0e2028;
        --text-primary: #f3f8f7;
        --text-secondary: #a9b8b6;
        --text-muted: #748987;
        --bg-main: #030607;
        --bg-card: #101b23;
        --bg-soft: #13262b;
        --border: #22343c;
        --border-strong: #2f4850;
        --shadow: 0 18px 48px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.03);
        background-color: #020407;
        background-image:
          radial-gradient(
            ellipse 58% 52% at 86% 18%,
            rgba(91, 78, 176, 0.47) 0%,
            rgba(48, 41, 101, 0.25) 34%,
            transparent 72%
          ),
          radial-gradient(
            ellipse 56% 52% at 8% 90%,
            rgba(0, 104, 98, 0.43) 0%,
            rgba(0, 60, 58, 0.23) 38%,
            transparent 75%
          ),
          linear-gradient(126deg, #010608 0%, #03050b 48%, #0a0710 100%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        background-attachment: fixed;
      }

      /* 02. LAYOUT GLOBAL -------------------------------------------------------- */
      .app-container {
        display: flex;
        min-height: 100vh;
      }

      .sidebar {
        width: 260px;
        background: linear-gradient(160deg, #062e34 0%, var(--sidebar-bg) 45%, #1d6f6a 100%);
        color: #fff;
        display: flex;
        flex-direction: column;
        position: fixed;
        height: 100vh;
        z-index: 100;
        transition:
          transform 0.3s ease,
          width 0.24s ease;
        box-shadow:
          inset -1px 0 0 rgba(255, 255, 255, 0.08),
          10px 0 34px rgba(11, 74, 74, 0.16);
      }

      .sidebar-header {
        height: 90.666px;
        padding: 12px;
        display: flex;
        align-items: center;
        gap: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }

      .logo-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(221, 237, 227, 0.12);
        border: 1px solid rgba(221, 237, 227, 0.34);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
      }

      .logo-icon svg {
        width: 34px;
        height: 34px;
        display: block;
      }

      .logo-block {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
      }

      .logo-text {
        font-size: 19px;
        font-weight: 800;
        letter-spacing: 0.07em;
        text-transform: uppercase;
      }

      .logo-tagline {
        font-size: 10px;
        color: #bfd3d1;
        margin-top: 3px;
        letter-spacing: 0.02em;
      }

      .sidebar-nav {
        flex: 1;
        padding: 16px 12px;
        overflow-y: auto;
      }

      .nav-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        color: #c7d6d4;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 4px;
        text-decoration: none;
      }

      .nav-item:hover {
        background: var(--sidebar-hover);
        color: #fff;
      }

      .nav-item.active {
        background: rgba(221, 237, 227, 0.16);
        color: #ffffff;
        box-shadow:
          inset 0 0 0 1px rgba(221, 237, 227, 0.18),
          0 8px 18px rgba(0, 0, 0, 0.08);
      }

      .nav-item i {
        width: 20px;
        text-align: center;
        font-size: 16px;
      }

      .sidebar-footer {
        padding: 16px 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .sidebar-footer .nav-item {
        flex: 1;
        margin-bottom: 0;
        min-width: 0;
      }

      .sidebar-collapse-btn {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        border: 1px solid rgba(221, 237, 227, 0.22);
        border-radius: 8px;
        background: rgba(221, 237, 227, 0.08);
        color: #d9e8e6;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition:
          background 0.2s ease,
          border-color 0.2s ease,
          transform 0.2s ease;
      }

      .sidebar-collapse-btn:hover {
        background: rgba(221, 237, 227, 0.16);
        border-color: rgba(221, 237, 227, 0.38);
      }

      .sidebar-collapse-btn:active {
        transform: scale(0.96);
      }

      .main-content {
        flex: 1;
        margin-left: 260px;
        display: flex;
        flex-direction: column;
        transition: margin-left 0.24s ease;
      }

      body.sidebar-collapsed .sidebar {
        width: 78px;
      }

      body.sidebar-collapsed .main-content {
        margin-left: 78px;
      }

      body.sidebar-collapsed .sidebar-header {
        justify-content: center;
        padding-left: 10px;
        padding-right: 10px;
      }

      body.sidebar-collapsed .logo-block {
        display: none;
      }

      body.sidebar-collapsed .sidebar-nav {
        padding-left: 10px;
        padding-right: 10px;
      }

      body.sidebar-collapsed .nav-item {
        justify-content: center;
        gap: 0;
        padding-left: 10px;
        padding-right: 10px;
      }

      body.sidebar-collapsed .nav-item span {
        display: none;
      }

      body.sidebar-collapsed .nav-item i {
        width: 20px;
        flex: 0 0 20px;
      }

      body.sidebar-collapsed .sidebar-footer {
        flex-direction: column;
        padding-left: 10px;
        padding-right: 10px;
      }

      body.sidebar-collapsed .sidebar-footer .nav-item {
        width: 40px;
        flex: 0 0 40px;
      }

      body.sidebar-collapsed .sidebar-collapse-btn i {
        transform: rotate(180deg);
      }

      .top-header {
        background: transparent;
        padding: 20px 32px;
        border-bottom: 1px solid rgba(29, 111, 106, 0.24);
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 50;
        box-shadow: none;
      }

      .top-header::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: -1px;
        left: 0;
        height: 1px;
        background: transparent;
        pointer-events: none;
      }

      .header-title h1 {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 4px;
      }

      .header-title p {
        color: var(--text-secondary);
        font-size: 14px;
      }

      .header-actions {
        display: flex;
        align-items: center;
        gap: 16px;
      }

      .search-box {
        position: relative;
      }

      .global-search-box {
        z-index: 80;
      }

      .search-box input {
        padding: 8px 12px 8px 36px;
        border: 1px solid var(--border);
        border-radius: 8px;
        font-size: 14px;
        width: 240px;
        outline: none;
        transition: border-color 0.2s;
      }

      .search-box input:focus {
        border-color: var(--accent);
      }

      .search-box i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-secondary);
        font-size: 14px;
      }

      .global-search-results {
        display: none;
        position: absolute;
        right: 0;
        top: calc(100% + 8px);
        width: min(420px, calc(100vw - 32px));
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 10px;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
        overflow: hidden;
        z-index: 120;
      }

      .global-search-results.active {
        display: block;
      }

      .global-search-result {
        width: 100%;
        border: 0;
        background: transparent;
        color: var(--text-primary);
        display: flex;
        gap: 12px;
        align-items: flex-start;
        text-align: left;
        padding: 12px 14px;
        cursor: pointer;
        border-bottom: 1px solid var(--border);
        font-family: inherit;
      }

      .global-search-result:last-child {
        border-bottom: 0;
      }

      .global-search-result:hover {
        background: var(--bg-soft);
      }

      .dark-mode .global-search-result:hover {
        background: #1f2937;
      }

      .global-search-result i {
        position: static;
        transform: none;
        width: 18px;
        margin-top: 2px;
        color: var(--accent);
      }

      .global-search-title {
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 3px;
      }

      .global-search-meta {
        font-size: 12px;
        color: var(--text-secondary);
        line-height: 1.4;
      }

      .global-search-empty {
        padding: 14px;
        color: var(--text-secondary);
        font-size: 13px;
        text-align: center;
      }

      .user-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--complement), #e6a092);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
      }

      .user-profile-card {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--bg-soft);
      }

      .user-profile-avatar {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--accent), var(--complement));
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 18px;
      }

      .user-profile-name {
        font-size: 16px;
        font-weight: 800;
        color: var(--text-primary);
      }

      .user-profile-meta {
        font-size: 13px;
        color: var(--text-secondary);
        margin-top: 3px;
      }

      .user-profile-details {
        flex: 1 1 auto;
        min-width: 0;
      }

      .user-profile-role {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        color: var(--accent);
        font-weight: 700;
      }

      .user-profile-actions {
        margin-left: auto;
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
      }

      .user-profile-actions .btn {
        justify-content: center;
      }

      .linked-accounts-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .linked-account-card {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--bg-soft);
        color: var(--text-primary);
      }

      .linked-account-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 40px;
        font-weight: 800;
        color: #fff;
        background: linear-gradient(135deg, var(--accent), var(--danger));
      }

      .linked-account-body {
        flex: 1;
        min-width: 0;
      }

      .linked-account-name {
        font-size: 14px;
        font-weight: 800;
        color: var(--text-primary);
      }

      .linked-account-meta {
        font-size: 12px;
        color: var(--text-secondary);
        margin-top: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .linked-account-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        padding: 3px 8px;
        font-size: 11px;
        font-weight: 800;
        color: var(--accent);
        background: var(--accent-soft);
        margin-top: 6px;
      }

      .linked-account-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
      }

      .settings-email-target {
        margin: 8px 0 16px 0;
        padding: 10px 14px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--bg-soft);
        color: var(--text-secondary);
        font-size: 13px;
      }

      .settings-email-target.hidden {
        display: none;
      }

      .content-area {
        padding: 24px 32px;
        flex: 1;
      }

      .alert-banner {
        background: #faf5ff;
        border: 1px solid #e9d5ff;
        border-radius: 12px;
        padding: 16px 20px;
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 24px;
        color: var(--purple);
        font-weight: 500;
        font-size: 14px;
      }

      .alert-banner i {
        font-size: 18px;
      }

      .alert-banner.hidden {
        display: none;
      }

      /* 03. COMPONENTE REUTILIZABILE -------------------------------------------- */
      .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-bottom: 24px;
      }

      .finance-stats-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 16px;
      }

      .stat-card {
        background: var(--bg-card);
        border-radius: 12px;
        padding: 20px;
        box-shadow: var(--shadow);
        border: 1px solid var(--border);
      }

      .stat-card.stat-card-soft-gradient {
        position: relative;
        overflow: hidden;
      }

      .stat-card.stat-card-soft-gradient::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 0 0, rgba(0, 136, 124, 0.16), transparent 42%);
        pointer-events: none;
      }

      .stat-card.stat-card-soft-gradient > .stat-header,
      .stat-card.stat-card-soft-gradient > .stat-value {
        position: relative;
        z-index: 1;
      }

      .card.card-soft-gradient {
        position: relative;
        isolation: isolate;
      }

      .card.card-soft-gradient::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: radial-gradient(circle at 0 0, rgba(0, 136, 124, 0.16), transparent 42%);
        pointer-events: none;
      }

      .card.card-soft-gradient > .card-header,
      .card.card-soft-gradient > .card-body {
        position: relative;
        z-index: 1;
        background: transparent;
      }

      .stat-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
      }

      .stat-label {
        color: var(--text-secondary);
        font-size: 14px;
        font-weight: 500;
      }

      .stat-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
      }

      .stat-icon.blue {
        background: var(--accent-light);
        color: var(--accent);
      }

      .stat-icon.green {
        background: var(--success-soft);
        color: var(--success);
      }

      .stat-icon.purple {
        background: #f3e8ff;
        color: var(--purple);
      }

      .stat-icon.orange {
        background: var(--warning-soft);
        color: var(--warning);
      }

      .stat-icon.red {
        background: var(--danger-soft);
        color: var(--danger);
      }

      .stat-value {
        font-size: 28px;
        font-weight: 700;
        color: var(--text-primary);
      }

      .stat-value.currency {
        font-size: 22px;
      }

      .stat-card.stat-card-predate,
      .stat-card.stat-card-income-accent {
        position: relative;
        overflow: hidden;
        background:
          radial-gradient(circle at 88% 14%, rgba(255, 255, 255, 0.46), transparent 30%),
          linear-gradient(135deg, #00d4c7 0%, #0e8bcb 48%, #ff6f61 100%);
        border-color: rgba(0, 212, 199, 0.58);
        box-shadow: 0 18px 46px rgba(14, 139, 203, 0.22);
      }

      .stat-card.stat-card-invoice-accent {
        position: relative;
        overflow: hidden;
        background:
          radial-gradient(circle at 88% 14%, rgba(255, 255, 255, 0.42), transparent 30%),
          linear-gradient(135deg, #f6a51a 0%, #e46c3c 48%, #7c3aed 100%);
        border-color: rgba(245, 158, 11, 0.62);
        box-shadow: 0 18px 46px rgba(217, 119, 6, 0.22);
      }

      .stat-card.stat-card-predate::after,
      .stat-card.stat-card-income-accent::after,
      .stat-card.stat-card-invoice-accent::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, rgba(255, 255, 255, 0.34), transparent 42%);
        pointer-events: none;
      }

      .stat-card.stat-card-predate .stat-header,
      .stat-card.stat-card-predate .stat-value,
      .stat-card.stat-card-income-accent .stat-header,
      .stat-card.stat-card-income-accent .stat-value,
      .stat-card.stat-card-invoice-accent .stat-header,
      .stat-card.stat-card-invoice-accent .stat-value {
        position: relative;
        z-index: 1;
      }

      .stat-card.stat-card-predate .stat-label,
      .stat-card.stat-card-income-accent .stat-label,
      .stat-card.stat-card-invoice-accent .stat-label {
        color: rgba(255, 255, 255, 0.86);
      }

      .stat-card.stat-card-predate .stat-value,
      .stat-card.stat-card-income-accent .stat-value,
      .stat-card.stat-card-invoice-accent .stat-value {
        color: #ffffff;
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.22);
      }

      .stat-card.stat-card-predate .stat-icon,
      .stat-card.stat-card-income-accent .stat-icon,
      .stat-card.stat-card-invoice-accent .stat-icon {
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
      }

      /* Instrument Dashboard combinat: salut, dată, oră și cronometru Focus */
      .dashboard-main-column {
        display: grid;
        align-content: start;
        gap: 24px;
        min-width: 0;
      }

      .dashboard-utility-card {
        position: relative;
        min-width: 0;
        overflow: hidden;
      }

      .dashboard-utility-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 92% 4%, rgba(46, 139, 122, 0.14), transparent 42%);
        pointer-events: none;
      }

      .dashboard-utility-card > * {
        position: relative;
        z-index: 1;
      }

      .dashboard-combined-body {
        display: grid;
        grid-template-columns: minmax(220px, 0.85fr) minmax(310px, 1.15fr);
        align-items: stretch;
        gap: 22px;
        min-height: 270px;
        padding: 26px;
      }

      .dashboard-combined-section {
        display: flex;
        align-items: stretch;
        min-width: 0;
      }

      .dashboard-time-section {
        padding-right: 22px;
        border-right: 1px solid var(--border);
      }

      .dashboard-time-body {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        gap: 24px;
        min-width: 0;
      }

      .dashboard-greeting {
        color: var(--text-primary);
        font-size: clamp(30px, 2.7vw, 42px);
        font-weight: 400;
        line-height: 1.12;
      }

      .dashboard-clock-panel {
        min-width: 0;
        text-align: left;
      }

      .dashboard-live-clock {
        color: var(--text-primary);
        font-size: clamp(30px, 2.8vw, 40px);
        font-weight: 400;
        font-variant-numeric: tabular-nums;
        line-height: 1;
        letter-spacing: 0.02em;
      }

      .dashboard-full-date {
        margin-top: 14px;
        color: var(--text-secondary);
        font-size: clamp(17px, 1.55vw, 21px);
        font-weight: 400;
        line-height: 1.35;
      }

      .dashboard-focus-body {
        display: grid;
        grid-template-columns: 190px 104px;
        align-items: center;
        justify-content: end;
        gap: 16px;
        width: auto;
        margin-left: auto;
        min-width: 0;
      }

      .dashboard-focus-section {
        justify-content: flex-end;
      }

      .focus-timer-progress {
        position: relative;
        width: 190px;
        height: 190px;
        flex: 0 0 190px;
      }

      .focus-timer-progress svg {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
        z-index: 1;
      }

      .focus-timer-track,
      .focus-timer-progress-ring {
        fill: none;
      }

      .focus-timer-neon-orbit {
        position: absolute;
        inset: 5px;
        z-index: 0;
        border-radius: 50%;
        animation: focusTimerNeonOrbit 2.8s linear infinite;
        pointer-events: none;
      }

      .focus-timer-neon-orbit::before,
      .focus-timer-neon-orbit::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: conic-gradient(
          from 0deg,
          #29d9ff 0%,
          #eafdff 18%,
          #657cff 34%,
          #9a55ff 52%,
          #c34cff 67%,
          #526cff 82%,
          #29d9ff 100%
        );
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
        mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
      }

      .focus-timer-neon-orbit::before {
        filter: drop-shadow(0 0 3px rgba(66, 214, 255, 0.95)) drop-shadow(0 0 9px rgba(126, 83, 255, 0.74));
      }

      .focus-timer-neon-orbit::after {
        opacity: 0.7;
        filter: blur(7px);
      }

      .focus-timer-track {
        stroke: color-mix(in srgb, var(--border) 76%, #0a0b13);
        stroke-width: 10;
        opacity: 0.95;
        transform-origin: 70px 70px;
      }

      .focus-timer-progress-ring {
        stroke: url(#focusTimerGradient);
        stroke-width: 7;
        stroke-linecap: round;
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
        filter: drop-shadow(0 0 4px rgba(137, 163, 255, 0.34));
        transition: stroke-dashoffset 0.35s linear;
      }

      .focus-timer-progress.focus-timer-idle-intro .focus-timer-track {
        animation: focusTimerIdleTrack 1.05s cubic-bezier(0.22, 0.72, 0.22, 1) 0.68s both;
      }

      .focus-timer-progress.focus-timer-idle-intro .focus-timer-progress-ring {
        animation: focusTimerIdleSweep 1.15s cubic-bezier(0.22, 0.72, 0.22, 1) 0.76s both;
      }

      .focus-timer-progress.focus-timer-idle-intro .focus-timer-neon-orbit::before,
      .focus-timer-progress.focus-timer-idle-intro .focus-timer-neon-orbit::after {
        animation: focusTimerIdleNeonGlow 1.15s ease-out 0.68s both;
      }

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

      @keyframes focusTimerIdleTrack {
        0% {
          opacity: 0.35;
          transform: scale(0.92);
        }
        58% {
          opacity: 1;
          transform: scale(1.035);
        }
        100% {
          opacity: 0.95;
          transform: scale(1);
        }
      }

      @keyframes focusTimerIdleSweep {
        0% {
          opacity: 0.25;
          stroke-dashoffset: 100;
        }
        52% {
          opacity: 1;
          stroke-dashoffset: 64;
        }
        100% {
          opacity: 1;
          stroke-dashoffset: 100;
        }
      }

      @keyframes focusTimerIdleNeonGlow {
        0% {
          opacity: 0.18;
        }
        55% {
          opacity: 1;
        }
        100% {
          opacity: 0.72;
        }
      }

      .focus-timer-center {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 11px;
        z-index: 2;
      }

      .focus-timer-remaining {
        color: var(--text-primary);
        font-size: 36px;
        font-weight: 400;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.02em;
        line-height: 1;
      }

      .focus-timer-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 84px;
        min-height: 31px;
        padding: 6px 12px;
        border: 1px solid color-mix(in srgb, var(--primary) 70%, white);
        border-radius: 999px;
        background: var(--primary);
        color: #ffffff;
        font: inherit;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 24%, transparent);
        transition:
          transform 0.18s ease,
          background-color 0.18s ease;
      }

      .focus-timer-toggle:hover {
        background: var(--primary-hover);
        transform: translateY(-1px);
      }

      .focus-timer-toggle:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 3px;
      }

      .focus-timer-settings {
        display: grid;
        gap: 15px;
        width: 104px;
        min-width: 104px;
        max-width: 104px;
        justify-self: end;
      }

      .focus-duration-row {
        display: grid;
        gap: 7px;
      }

      .focus-timer-title {
        color: var(--text-primary);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.25;
        white-space: nowrap;
      }

      .focus-duration-group {
        display: grid;
        gap: 6px;
      }

      .focus-duration-group .form-label {
        margin: 0;
      }

      .focus-duration-input {
        width: 104px;
        appearance: textfield;
        -moz-appearance: textfield;
        font-variant-numeric: tabular-nums;
      }

      .focus-duration-input::-webkit-inner-spin-button,
      .focus-duration-input::-webkit-outer-spin-button {
        margin: 0;
        -webkit-appearance: none;
      }

      .focus-duration-unit {
        color: var(--text-secondary);
        font-size: 12px;
      }

      .focus-reset-button {
        width: 104px;
        justify-content: center;
      }

      .focus-duration-input:disabled {
        cursor: not-allowed;
        opacity: 0.48;
      }

      @media (min-width: 769px) and (max-width: 1200px) {
        .dashboard-combined-body {
          grid-template-columns: minmax(140px, 0.9fr) minmax(200px, 1.1fr);
          gap: 10px;
          min-height: 220px;
          padding: 16px;
        }

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

        .dashboard-greeting,
        .dashboard-live-clock {
          font-size: clamp(24px, 2.6vw, 32px);
        }

        .dashboard-full-date {
          margin-top: 9px;
          font-size: clamp(13px, 1.45vw, 17px);
        }

        .dashboard-focus-body {
          grid-template-columns: clamp(118px, 12vw, 145px) minmax(74px, 88px);
          gap: 8px;
          width: 100%;
        }

        .focus-timer-progress {
          width: clamp(118px, 12vw, 145px);
          height: clamp(118px, 12vw, 145px);
          flex-basis: clamp(118px, 12vw, 145px);
        }

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

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

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

        .focus-timer-settings {
          width: 100%;
          min-width: 0;
        }

        .focus-timer-title {
          font-size: 9px;
          letter-spacing: -0.08px;
        }

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

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

      @media (max-width: 640px) {
        .dashboard-focus-body {
          grid-template-columns: 1fr;
          gap: 22px;
        }
        .dashboard-clock-panel {
          text-align: left;
        }
        .focus-timer-progress {
          justify-self: center;
        }
        .focus-timer-settings {
          justify-self: end;
        }
      }

      .dashboard-side-column {
        display: grid;
        align-content: start;
        gap: 24px;
        min-width: 0;
      }

      .dashboard-overview-card {
        position: relative;
        overflow: hidden;
      }

      .dashboard-overview-card .card-header {
        position: relative;
        z-index: 1;
      }

      .dashboard-overview-body {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        min-height: 382px;
        padding: 22px 18px 20px;
      }

      .dashboard-overview-chart {
        position: relative;
        width: 214px;
        height: 214px;
        flex: 0 0 214px;
        isolation: isolate;
      }

      .dashboard-overview-chart::before {
        content: "";
        position: absolute;
        inset: 24%;
        z-index: -1;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(46, 139, 122, 0.11), rgba(94, 90, 200, 0.035) 50%, transparent 72%);
        filter: blur(9px);
      }

      .dashboard-overview-chart svg {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
        transform: rotate(-90deg);
      }

      .dashboard-overview-track,
      .dashboard-overview-arc {
        fill: none;
        stroke-width: 5.5;
        transform-origin: 70px 70px;
        transition:
          opacity 0.22s ease,
          filter 0.22s ease,
          stroke-width 0.22s ease;
      }

      .dashboard-overview-track {
        stroke: color-mix(in srgb, var(--border) 72%, transparent);
        opacity: 0.42;
      }

      .dashboard-overview-arc {
        stroke: var(--overview-stroke, var(--overview-color));
        stroke-linecap: round;
        stroke-dasharray: var(--overview-progress) 100;
        stroke-dashoffset: 100;
        filter: drop-shadow(0 0 3px color-mix(in srgb, var(--overview-color) 38%, transparent));
        animation: dashboardOverviewDraw 1.05s cubic-bezier(0.22, 0.72, 0.22, 1) var(--overview-delay, 0s) forwards;
      }

      .dashboard-overview-arc.is-highlighted {
        stroke-width: 6.5;
        filter: drop-shadow(0 0 5px color-mix(in srgb, var(--overview-color) 62%, transparent))
          drop-shadow(0 0 11px color-mix(in srgb, var(--overview-color) 24%, transparent));
      }

      .dashboard-overview-arc.is-dimmed {
        opacity: 0.2;
      }

      .dashboard-overview-center {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: var(--text-primary);
        opacity: 0;
        transform: scale(0.8);
        animation: dashboardOverviewCenterIn 0.32s ease-out 0.48s forwards;
      }

      .dashboard-overview-total {
        font-size: 32px;
        font-weight: 650;
        line-height: 1;
      }

      .dashboard-overview-total-label {
        margin-top: 7px;
        color: var(--text-secondary);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .dashboard-overview-legend {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        max-width: 300px;
      }

      .dashboard-overview-legend-item {
        display: flex;
        min-width: 0;
        min-height: 78px;
        padding: 9px 5px 8px;
        border: 1px solid transparent;
        border-radius: 10px;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        text-align: center;
        cursor: default;
        opacity: 0;
        transform: translateY(6px);
        animation: dashboardOverviewLegendIn 0.32s ease-out calc(0.66s + var(--overview-delay, 0s)) forwards;
        transition:
          border-color 0.2s ease,
          background 0.2s ease,
          transform 0.2s ease;
      }

      .dashboard-overview-legend-item:hover,
      .dashboard-overview-legend-item:focus-visible {
        border-color: color-mix(in srgb, var(--overview-color) 36%, transparent);
        background: color-mix(in srgb, var(--overview-color) 7%, transparent);
        transform: translateY(-2px);
        outline: none;
      }

      .dashboard-overview-legend-dot {
        width: 24px;
        height: 4px;
        border-radius: 50%;
        background: var(--overview-gradient, var(--overview-color));
        box-shadow: 0 0 8px color-mix(in srgb, var(--overview-color) 42%, transparent);
      }

      .dashboard-overview-legend-label {
        min-width: 0;
        color: var(--text-secondary);
        font-size: 10px;
        font-weight: 600;
        line-height: 1.25;
      }

      .dashboard-overview-legend-value {
        color: var(--text-primary);
        font-size: 20px;
        font-weight: 750;
        line-height: 1;
      }

      @keyframes dashboardOverviewDraw {
        to {
          stroke-dashoffset: 0;
        }
      }

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

      @keyframes dashboardOverviewLegendIn {
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .dashboard-overview-arc,
        .dashboard-overview-center,
        .dashboard-overview-legend-item {
          animation: none;
        }
        .dashboard-overview-arc {
          stroke-dashoffset: 0;
        }
        .dashboard-overview-center,
        .dashboard-overview-legend-item {
          opacity: 1;
          transform: none;
        }
      }

      .dashboard-grid {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(420px, 2fr);
        gap: 24px;
        padding: 24px;
        border: 1px solid rgba(103, 98, 204, 0.2);
        border-radius: 20px;
        background:
          radial-gradient(
            ellipse 58% 48% at 88% 18%,
            rgba(91, 78, 176, 0.44) 0%,
            rgba(48, 41, 101, 0.24) 34%,
            transparent 72%
          ),
          radial-gradient(
            ellipse 52% 48% at 10% 88%,
            rgba(0, 104, 98, 0.4) 0%,
            rgba(0, 60, 58, 0.22) 38%,
            transparent 75%
          ),
          linear-gradient(126deg, #010608 0%, #03050b 48%, #0a0710 100%);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.035),
          0 22px 60px rgba(0, 0, 0, 0.22);
      }

      /* Aceeași ordine a casetelor când coloanele sunt reunite. */
      #dashboard .dashboard-combined-card {
        order: 1;
      }

      #dashboard .dashboard-overview-card {
        order: 2;
      }

      #dashboard .dashboard-projects-card {
        order: 3;
      }

      #dashboard .dashboard-deadlines-card {
        order: 4;
      }

      body.dark-mode #dashboard .dashboard-grid {
        border-color: transparent;
        background: transparent;
        box-shadow: none;
      }

      /* Efect premium translucid reutilizat pe panourile principale selectate. */
      body.dark-mode #dashboard .dashboard-overview-card,
      body.dark-mode #dashboard .dashboard-combined-card,
      body.dark-mode #dashboard .dashboard-projects-card,
      body.dark-mode #dashboard .dashboard-deadlines-card,
      body.dark-mode #financeFilterPanel,
      body.dark-mode #rapoarte .reports-stack > .card.card-soft-gradient {
        background: rgba(10, 24, 32, 0.56);
        border-color: rgba(95, 118, 145, 0.3);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.035),
          0 18px 48px rgba(0, 0, 0, 0.18);
        -webkit-backdrop-filter: blur(18px) saturate(112%);
        backdrop-filter: blur(18px) saturate(112%);
      }

      body.dark-mode #dashboard .dashboard-overview-card.card-soft-gradient::before,
      body.dark-mode #dashboard .dashboard-projects-card.card-soft-gradient::before,
      body.dark-mode #rapoarte .reports-stack > .card.card-soft-gradient::before {
        background: radial-gradient(circle at 0 0, rgba(0, 212, 199, 0.1), transparent 48%);
      }

      body:not(.dark-mode) #dashboard .dashboard-grid {
        border-color: transparent;
        background: transparent;
        box-shadow: none;
      }

      @media (max-width: 768px) {
        #dashboard .dashboard-grid {
          padding: 16px;
          border-radius: 14px;
        }
      }

      @media (min-width: 1025px) and (max-width: 1200px) {
        body:not(.sidebar-collapsed) #dashboard .dashboard-grid {
          grid-template-columns: minmax(0, 1fr);
        }

        body:not(.sidebar-collapsed) #dashboard .dashboard-main-column,
        body:not(.sidebar-collapsed) #dashboard .dashboard-side-column {
          display: contents;
        }

        body:not(.sidebar-collapsed) #dashboard .dashboard-projects-card {
          display: none !important;
        }
      }

      /* Animații Dashboard: instrument combinat, proiecte active și termene */
      .dashboard-combined-card.dashboard-card-animate {
        animation: dashboardUtilityCardIn 0.58s cubic-bezier(0.22, 0.72, 0.22, 1) both;
      }

      .dashboard-combined-card.dashboard-card-animate .dashboard-greeting,
      .dashboard-combined-card.dashboard-card-animate .dashboard-live-clock,
      .dashboard-combined-card.dashboard-card-animate .dashboard-full-date,
      .dashboard-combined-card.dashboard-card-animate .focus-timer-progress,
      .dashboard-combined-card.dashboard-card-animate .focus-timer-settings {
        opacity: 0;
        animation: dashboardUtilityItemIn 0.42s ease-out forwards;
      }

      .dashboard-combined-card.dashboard-card-animate .dashboard-greeting {
        animation-delay: 0.1s;
      }
      .dashboard-combined-card.dashboard-card-animate .dashboard-live-clock {
        animation-delay: 0.16s;
      }
      .dashboard-combined-card.dashboard-card-animate .dashboard-full-date {
        animation-delay: 0.22s;
      }
      .dashboard-combined-card.dashboard-card-animate .focus-timer-progress {
        animation-delay: 0.18s;
      }
      .dashboard-combined-card.dashboard-card-animate .focus-timer-settings {
        animation-delay: 0.27s;
      }

      .dashboard-projects-card.dashboard-card-animate {
        animation: dashboardProjectsCardIn 0.52s cubic-bezier(0.22, 0.72, 0.22, 1) both;
      }

      .dashboard-deadlines-card.dashboard-card-animate {
        animation: dashboardDeadlinesCardIn 0.52s cubic-bezier(0.22, 0.72, 0.22, 1) 0.08s both;
      }

      #recentProjects .project-item {
        animation: dashboardProjectRowIn 0.34s ease-out both;
      }

      #recentProjects .project-item:nth-child(1) {
        animation-delay: 0.1s;
      }
      #recentProjects .project-item:nth-child(2) {
        animation-delay: 0.14s;
      }
      #recentProjects .project-item:nth-child(3) {
        animation-delay: 0.18s;
      }
      #recentProjects .project-item:nth-child(4) {
        animation-delay: 0.22s;
      }
      #recentProjects .project-item:nth-child(5) {
        animation-delay: 0.26s;
      }
      #recentProjects .project-item:nth-child(6) {
        animation-delay: 0.3s;
      }
      #recentProjects .project-item:nth-child(7) {
        animation-delay: 0.34s;
      }
      #recentProjects .project-item:nth-child(8) {
        animation-delay: 0.38s;
      }

      .dashboard-project-progress-block {
        display: grid;
        gap: 6px;
        width: 238px;
        min-width: 210px;
      }

      .dashboard-project-progress-line {
        display: grid;
        grid-template-columns: minmax(72px, 1fr) 34px;
        gap: 8px;
        align-items: center;
      }

      .dashboard-project-progress-track {
        height: 7px;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: color-mix(in srgb, var(--bg-soft) 78%, var(--border));
      }

      .dashboard-project-progress-fill {
        width: var(--dashboard-progress, 0%);
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #1d6f6a, #3ea995 70%, #6be0bd);
        box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 38%, transparent);
        transform: scaleX(0);
        transform-origin: left center;
        animation: dashboardProjectProgressFill 0.82s cubic-bezier(0.22, 0.72, 0.22, 1) forwards;
        animation-delay: var(--dashboard-progress-delay, 0.18s);
      }

      .dashboard-project-progress-percent {
        color: var(--text-secondary);
        font-size: 11px;
        font-weight: 700;
        text-align: right;
        font-variant-numeric: tabular-nums;
      }

      .dashboard-project-delivery {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        color: var(--text-secondary);
        font-size: 10px;
        line-height: 1.2;
        white-space: nowrap;
      }

      .dashboard-project-delivery-date {
        display: inline-flex;
        align-items: center;
        gap: 4px;
      }

      .dashboard-project-delivery-countdown {
        color: var(--accent);
        font-weight: 700;
      }

      .dashboard-project-delivery-countdown.soon {
        color: var(--warning);
      }

      .dashboard-project-delivery-countdown.today {
        color: var(--success);
      }

      .dashboard-project-delivery-countdown.overdue {
        color: var(--danger);
      }

      .dashboard-project-delivery-countdown.none {
        color: var(--text-muted);
      }

      #upcomingDeadlines .deadline-group {
        animation: dashboardDeadlineGroupIn 0.36s ease-out both;
      }

      #upcomingDeadlines .deadline-group:nth-child(1) {
        animation-delay: 0.16s;
      }
      #upcomingDeadlines .deadline-group:nth-child(2) {
        animation-delay: 0.23s;
      }
      #upcomingDeadlines .deadline-group:nth-child(3) {
        animation-delay: 0.3s;
      }

      #upcomingDeadlines .deadline-item {
        animation: dashboardDeadlineRowIn 0.3s ease-out both;
      }

      #upcomingDeadlines .deadline-item:nth-child(1) {
        animation-delay: 0.24s;
      }
      #upcomingDeadlines .deadline-item:nth-child(2) {
        animation-delay: 0.28s;
      }
      #upcomingDeadlines .deadline-item:nth-child(3) {
        animation-delay: 0.32s;
      }
      #upcomingDeadlines .deadline-item:nth-child(4) {
        animation-delay: 0.36s;
      }

      @keyframes dashboardUtilityCardIn {
        from {
          opacity: 0;
          transform: translate3d(0, -12px, 0) scale(0.99);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

      @keyframes dashboardUtilityItemIn {
        from {
          opacity: 0;
          transform: translateY(8px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

      @keyframes dashboardProjectsCardIn {
        from {
          opacity: 0;
          transform: translate3d(-16px, 8px, 0) scale(0.99);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

      @keyframes dashboardDeadlinesCardIn {
        from {
          opacity: 0;
          transform: translate3d(16px, 8px, 0) scale(0.99);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

      @keyframes dashboardProjectRowIn {
        from {
          opacity: 0;
          transform: translateX(-10px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

      @keyframes dashboardDeadlineGroupIn {
        from {
          opacity: 0;
          transform: translateY(8px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

      @keyframes dashboardDeadlineRowIn {
        from {
          opacity: 0;
          transform: translateX(8px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

      @keyframes dashboardProjectProgressFill {
        from {
          opacity: 0.42;
          transform: scaleX(0);
        }
        to {
          opacity: 1;
          transform: scaleX(1);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .dashboard-combined-card.dashboard-card-animate,
        .dashboard-combined-card.dashboard-card-animate .dashboard-greeting,
        .dashboard-combined-card.dashboard-card-animate .dashboard-live-clock,
        .dashboard-combined-card.dashboard-card-animate .dashboard-full-date,
        .dashboard-combined-card.dashboard-card-animate .focus-timer-progress,
        .dashboard-combined-card.dashboard-card-animate .focus-timer-settings,
        .dashboard-projects-card.dashboard-card-animate,
        .dashboard-deadlines-card.dashboard-card-animate,
        .focus-timer-neon-orbit,
        .focus-timer-neon-orbit::before,
        .focus-timer-neon-orbit::after,
        .focus-timer-progress.focus-timer-idle-intro .focus-timer-track,
        .focus-timer-progress.focus-timer-idle-intro .focus-timer-progress-ring,
        .dashboard-project-progress-fill,
        #recentProjects .project-item,
        #upcomingDeadlines .deadline-group,
        #upcomingDeadlines .deadline-item {
          animation: none;
          opacity: 1;
          transform: none;
        }
      }

      .reports-stack {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
      }

      .card {
        background: var(--bg-card);
        border-radius: 12px;
        box-shadow: var(--shadow);
        border: 1px solid var(--border);
        overflow: hidden;
      }

      .card-header {
        padding: 20px 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--border);
      }

      .card-title {
        font-size: 16px;
        font-weight: 600;
      }

      #dashboard .dashboard-agenda-header {
        flex-wrap: wrap;
        gap: 10px 12px;
      }

      #dashboard .dashboard-agenda-header .card-title {
        flex: 1 0 auto;
      }

      #dashboard .dashboard-responsabil-filter {
        flex: 0 1 200px;
        width: 200px;
        max-width: 100%;
        min-width: 0;
        margin-left: auto;
        padding: 7px 28px 7px 10px;
        font-size: 12px;
        text-overflow: ellipsis;
      }

      .card-link {
        color: var(--accent);
        font-size: 13px;
        font-weight: 500;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .card-body {
        padding: 20px 24px;
      }

      .dashboard-scroll-list {
        max-height: 620px;
        overflow-y: auto;
        padding-right: 12px;
        scrollbar-width: thin;
        scrollbar-color: var(--border-strong) transparent;
      }

      .dashboard-scroll-list::-webkit-scrollbar {
        width: 8px;
      }

      .dashboard-scroll-list::-webkit-scrollbar-track {
        background: transparent;
      }

      .dashboard-scroll-list::-webkit-scrollbar-thumb {
        background: var(--border-strong);
        border-radius: 999px;
      }

      .project-item {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px 0;
        border-bottom: 1px solid var(--border);
      }

      .project-item:last-child {
        border-bottom: none;
      }

      .project-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
      }

      .project-dot.green {
        background: var(--success);
      }

      .project-dot.blue {
        background: var(--info);
      }

      .project-dot.orange {
        background: var(--warning);
      }

      .project-dot.red {
        background: var(--danger);
      }

      .project-dot.purple {
        background: var(--purple);
      }

      .project-info {
        flex: 1;
      }

      .dashboard-project-link {
        appearance: none;
        width: auto;
        min-width: 0;
        border: 0;
        border-radius: 7px;
        padding: 3px 5px;
        margin: -3px -5px;
        background: transparent;
        color: inherit;
        font: inherit;
        text-align: left;
        cursor: pointer;
        transition:
          background-color 0.2s ease,
          color 0.2s ease;
      }

      .dashboard-project-link:hover,
      .dashboard-project-link:focus-visible {
        color: var(--accent);
        background: transparent;
        outline: none;
      }

      .dashboard-project-link:hover .project-name,
      .dashboard-project-link:focus-visible .project-name,
      .dashboard-project-link:hover .project-client,
      .dashboard-project-link:focus-visible .project-client,
      .dashboard-project-link:hover .project-stage-phase,
      .dashboard-project-link:focus-visible .project-stage-phase {
        color: var(--accent);
      }

      .project-table-name {
        display: inline-flex;
        align-items: center;
        gap: 9px;
      }

      .project-number-column,
      .project-number-cell {
        width: 1%;
        min-width: 54px;
        max-width: 64px;
        white-space: nowrap;
      }

      .project-number-cell {
        color: var(--text-secondary);
        font-variant-numeric: tabular-nums;
      }

      .project-table-color-dot {
        width: 10px;
        height: 10px;
        flex: 0 0 10px;
        border-radius: 50%;
        background: var(--project-color);
        box-shadow: 0 0 8px color-mix(in srgb, var(--project-color) 38%, transparent);
      }

      .project-name {
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 4px;
      }

      .project-client {
        color: var(--text-secondary);
        font-size: 13px;
      }

      #recentProjects .project-client,
      #recentProjects .project-stage-phase {
        line-height: 1.45;
        overflow-wrap: anywhere;
      }

      #recentProjects .project-stage-phase {
        margin-top: 3px;
        color: var(--text-secondary);
        font-size: 13px;
      }

      .project-tags {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
      }

      .tag {
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .tag.dtac {
        background: #ffedd5;
        color: #c2410c;
      }

      .tag.sf {
        background: var(--info-soft);
        color: #1d4ed8;
      }

      .tag.pac {
        background: var(--success-soft);
        color: #166534;
      }

      .tag.ac {
        background: #e0e7ff;
        color: #4338ca;
      }

      .tag.custom {
        background: var(--purple-soft);
        color: var(--purple);
      }

      .status-badge {
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
        background: var(--bg-soft);
        color: var(--text-secondary);
      }

      .status-badge.in-lucru {
        background: #fee2e2;
        color: #7f1d1d;
      }

      .status-badge.in-asteptare {
        background: #fef3c7;
        color: #78350f;
      }

      .status-badge.depus {
        background: #e0e7ff;
        color: #312e81;
      }

      .status-badge.necesita-completari {
        background: #ffedd5;
        color: #9a3412;
      }

      .status-badge.in-analiza {
        background: #fef3c7;
        color: #78350f;
      }

      .status-badge.aprobat {
        background: #dcfce7;
        color: #14532d;
      }

      .status-badge.respins {
        background: #fee2e2;
        color: #7f1d1d;
      }

      .status-badge.print-verificare {
        background: #dbeafe;
        color: #1e3a8a;
      }

      .status-badge.predat-depus {
        background: #dcfce7;
        color: #14532d;
      }

      .status-badge.completari {
        background: #dbeafe;
        color: #1e3a8a;
      }

      .status-badge.incasat {
        background: #dcfce7;
        color: #14532d;
      }

      .event-temporal-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        width: max-content;
        padding: 5px 10px;
        border: 1px solid transparent;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
      }

      .event-temporal-badge i {
        font-size: 10px;
      }

      .event-temporal-badge.past {
        border-color: color-mix(in srgb, var(--text-muted) 28%, transparent);
        background: color-mix(in srgb, var(--text-muted) 12%, transparent);
        color: var(--text-muted);
      }

      .event-temporal-badge.ongoing {
        border-color: color-mix(in srgb, var(--warning) 34%, transparent);
        background: color-mix(in srgb, var(--warning) 15%, transparent);
        color: var(--warning);
      }

      .event-temporal-badge.upcoming {
        border-color: color-mix(in srgb, var(--accent) 34%, transparent);
        background: color-mix(in srgb, var(--accent) 15%, transparent);
        color: var(--accent);
      }

      .event-temporal-badge.undated {
        border-color: var(--border);
        background: var(--bg-soft);
        color: var(--text-secondary);
      }

      .event-temporal-badge.completed {
        border-color: color-mix(in srgb, var(--success) 34%, transparent);
        background: color-mix(in srgb, var(--success) 15%, transparent);
        color: var(--success);
      }

      .event-title-cell {
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 0;
      }

      .event-title-cell .task-checkbox {
        flex: 0 0 20px;
        padding: 0;
      }

      .event-title-done strong {
        color: var(--text-muted);
        text-decoration: line-through;
      }

      .email-choice-list {
        display: grid;
        gap: 10px;
      }

      .email-choice-button {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 11px;
        width: 100%;
        padding: 13px 14px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: color-mix(in srgb, var(--bg-soft) 72%, transparent);
        color: var(--text-primary);
        text-align: left;
        cursor: pointer;
      }

      .email-choice-button:hover,
      .email-choice-button:focus-visible {
        border-color: var(--accent);
        background: color-mix(in srgb, var(--accent) 9%, var(--bg-soft));
        outline: none;
      }

      .email-choice-button i {
        color: var(--accent);
      }

      .email-choice-main {
        display: grid;
        gap: 3px;
        min-width: 0;
      }

      .email-choice-main strong,
      .email-choice-main span {
        overflow-wrap: anywhere;
      }

      .email-choice-main span {
        color: var(--text-secondary);
        font-size: 11px;
      }

      .progress-bar {
        width: 80px;
        height: 6px;
        background: #e2e8f0;
        border-radius: 3px;
        overflow: hidden;
      }

      .progress-fill {
        height: 100%;
        background: var(--accent);
        border-radius: 3px;
        transition: width 0.3s;
      }

      .progress-manual-control {
        display: grid;
        grid-template-columns: 1fr 96px;
        gap: 12px;
        align-items: center;
      }

      .progress-range {
        accent-color: var(--accent);
        width: 100%;
      }

      .progress-note {
        font-size: 12px;
        color: var(--text-secondary);
        margin-top: 6px;
      }

      .project-status-select {
        min-width: 128px;
        border: 1px solid var(--border);
        border-radius: 999px;
        padding: 6px 28px 6px 10px;
        font-size: 12px;
        font-weight: 600;
        background: var(--bg-soft);
        color: var(--text-primary);
        cursor: pointer;
        outline: none;
      }

      .project-status-select:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-light);
      }

      .project-status-select.in-lucru {
        background: #fee2e2;
        color: #7f1d1d;
        border-color: #fecaca;
      }

      .project-status-select.in-asteptare {
        background: #fef3c7;
        color: #78350f;
        border-color: #fde68a;
      }

      .project-status-select.print-verificare {
        background: #dbeafe;
        color: #1e3a8a;
        border-color: #bfdbfe;
      }

      .project-status-select.predat-depus {
        background: #dcfce7;
        color: #14532d;
        border-color: #bbf7d0;
      }

      .project-status-select.completari {
        background: #dbeafe;
        color: #1e3a8a;
        border-color: #bfdbfe;
      }

      .project-status-select.incasat {
        background: #dcfce7;
        color: #14532d;
        border-color: #bbf7d0;
      }

      .aviz-status-select {
        min-width: 118px;
        border: 1px solid var(--border);
        border-radius: 999px;
        padding: 6px 28px 6px 10px;
        font-size: 12px;
        font-weight: 600;
        background: var(--bg-soft);
        color: var(--text-primary);
        cursor: pointer;
        outline: none;
      }

      .aviz-status-select:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-light);
      }

      .aviz-status-select.in-lucru {
        background: #fee2e2;
        color: #7f1d1d;
        border-color: #fecaca;
      }

      .aviz-status-select.depus {
        background: #e0e7ff;
        color: #312e81;
        border-color: #c7d2fe;
      }

      .aviz-status-select.necesita-completari {
        background: #ffedd5;
        color: #9a3412;
        border-color: #fed7aa;
      }

      .aviz-status-select.in-analiza {
        background: #fef3c7;
        color: #78350f;
        border-color: #fde68a;
      }

      .aviz-status-select.aprobat {
        background: #dcfce7;
        color: #14532d;
        border-color: #bbf7d0;
      }

      .aviz-status-select.respins {
        background: #fee2e2;
        color: #7f1d1d;
        border-color: #fecaca;
      }

      .project-progress-inline {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 150px;
      }

      .project-progress-range {
        width: 112px;
        accent-color: var(--accent);
        cursor: pointer;
      }

      .project-progress-percent {
        width: 36px;
        font-size: 12px;
        color: var(--text-secondary);
        font-weight: 600;
      }

      .project-progress-hidden {
        display: block;
        min-height: 24px;
      }

      .project-readonly-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
      }

      .project-readonly-field {
        padding: 12px 14px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: #f2f4f4;
      }

      .project-readonly-field.full {
        grid-column: 1/-1;
      }

      .project-readonly-label {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--text-secondary);
        font-weight: 700;
        margin-bottom: 5px;
      }

      .project-readonly-value {
        font-size: 14px;
        color: var(--text-primary);
        font-weight: 600;
        line-height: 1.45;
      }

      .project-readonly-phases {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-top: 2px;
      }

      .project-readonly-phase {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg-card);
        font-size: 13px;
        font-weight: 600;
        color: var(--text-secondary);
      }

      .project-readonly-phase.completed {
        background: #e8ecec;
        border-color: #bfc8c7;
        color: #1f2f2e;
      }

      .project-readonly-phase .phase-mark {
        width: 16px;
        height: 16px;
        border-radius: 4px;
        border: 2px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        flex-shrink: 0;
      }

      .project-readonly-phase.completed .phase-mark {
        background: var(--success);
        border-color: var(--success);
        color: white;
      }

      .project-readonly-color {
        display: inline-flex;
        align-items: center;
        gap: 10px;
      }

      .project-readonly-color-swatch {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid #fff;
        box-shadow: 0 0 0 1px var(--border);
      }

      .readonly-external-link {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: var(--accent);
        font-weight: 700;
        text-decoration: none;
        overflow-wrap: anywhere;
      }

      .readonly-external-link span {
        overflow-wrap: anywhere;
        word-break: break-word;
      }

      .readonly-external-link:hover {
        text-decoration: underline;
      }

      @media (max-width: 768px) {
        .project-readonly-grid {
          grid-template-columns: 1fr;
        }
      }

      .deadline-item {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        padding: 14px 0;
        border-bottom: 1px solid var(--border);
      }

      .deadline-item:last-child {
        border-bottom: none;
      }

      .dashboard-deadline-link {
        appearance: none;
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 12px;
        border: 0;
        border-radius: 7px;
        padding: 4px;
        margin: -4px;
        background: transparent;
        color: inherit;
        font: inherit;
        text-align: left;
        cursor: pointer;
      }

      .dashboard-deadline-link:hover .deadline-info,
      .dashboard-deadline-link:focus-visible .deadline-info {
        color: var(--accent);
      }

      .dashboard-deadline-link:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }

      .deadline-task-title {
        display: block;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .deadline-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-top: 6px;
        flex-shrink: 0;
      }

      .deadline-info {
        flex: 1;
        min-width: 0;
      }

      .deadline-info h4 {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 4px;
      }

      .deadline-meta {
        font-size: 12px;
        color: var(--text-secondary);
        line-height: 1.5;
      }

      .deadline-countdown {
        margin-left: auto;
        min-width: 92px;
        text-align: center;
        border-radius: 999px;
        padding: 5px 9px;
        font-size: 12px;
        font-weight: 700;
        background: var(--bg-soft);
        color: var(--text-secondary);
        white-space: nowrap;
      }

      .deadline-countdown.normal {
        background: var(--info-soft);
        color: #1e40af;
      }

      .deadline-countdown.soon,
      .deadline-countdown.today {
        background: var(--warning-soft);
        color: #92400e;
      }

      .deadline-countdown.overdue {
        background: var(--danger-soft);
        color: #991b1b;
      }

      .deadline-countdown.none {
        background: var(--bg-soft);
        color: var(--text-secondary);
      }

      .deadline-groups {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .deadline-group {
        border: 1px solid var(--border);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.015);
        overflow: hidden;
      }

      .deadline-group-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--border);
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.45px;
        color: var(--text-secondary);
      }

      .deadline-group-header i {
        width: 15px;
        text-align: center;
        color: var(--accent);
      }

      .deadline-group.overdue .deadline-group-header i {
        color: var(--danger);
      }

      .deadline-group.today .deadline-group-header i {
        color: var(--warning);
      }

      .deadline-group.upcoming .deadline-group-header i {
        color: var(--success);
      }

      @property --agenda-outline-angle {
        syntax: "<angle>";
        inherits: false;
        initial-value: 0deg;
      }

      .deadline-group.today {
        position: relative;
        isolation: isolate;
        border-color: transparent;
      }

      .deadline-group.today::before {
        position: absolute;
        inset: 0;
        z-index: 2;
        padding: 1.5px;
        border-radius: inherit;
        background: conic-gradient(
          from var(--agenda-outline-angle),
          #20bfa9,
          #38bdf8,
          #8b5cf6,
          #20bfa9
        );
        content: "";
        pointer-events: none;
        -webkit-mask:
          linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 30%, transparent));
        animation: dashboardTodayOutline 5s linear infinite;
      }

      .deadline-group.today > * {
        position: relative;
        z-index: 1;
      }

      @keyframes dashboardTodayOutline {
        to {
          --agenda-outline-angle: 360deg;
        }
      }

      .deadline-group-count {
        margin-left: auto;
        min-width: 24px;
        padding: 2px 7px;
        border-radius: 999px;
        background: var(--bg-soft);
        color: var(--text-primary);
        font-size: 11px;
        text-align: center;
      }

      .deadline-group-body {
        padding: 0 12px;
      }

      .deadline-group-body.scrollable {
        max-height: 288px;
        overflow-y: auto;
        padding-right: 8px;
        scrollbar-width: thin;
        scrollbar-color: var(--border-strong) transparent;
      }

      .deadline-group-body.scrollable::-webkit-scrollbar {
        width: 7px;
      }

      .deadline-group-body.scrollable::-webkit-scrollbar-track {
        background: transparent;
      }

      .deadline-group-body.scrollable::-webkit-scrollbar-thumb {
        background: var(--border-strong);
        border-radius: 999px;
      }

      .deadline-group .deadline-item {
        height: 72px;
        min-height: 72px;
        padding: 10px 0;
        align-items: center;
      }

      .deadline-group .deadline-dot {
        margin-top: 0;
      }

      .agenda-item-icon {
        display: inline-flex;
        flex: 0 0 26px;
        width: 26px;
        height: 26px;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: color-mix(in srgb, var(--agenda-color, var(--accent)) 14%, transparent);
        color: var(--agenda-color, var(--accent));
        font-size: 11px;
      }

      .agenda-kind-label {
        color: var(--agenda-color, var(--accent));
        font-weight: 750;
      }

      .deadline-group .deadline-info h4,
      .deadline-group .deadline-meta {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .deadline-group-empty {
        padding: 14px 12px;
        color: var(--text-muted);
        font-size: 12px;
        line-height: 1.4;
      }

      .deadline-group .deadline-item:last-child {
        border-bottom: 0;
      }

      .dashboard-agenda-highlight {
        animation: dashboardAgendaHighlight 1s cubic-bezier(0.2, 0.72, 0.2, 1) both;
      }

      @keyframes dashboardAgendaHighlight {
        0%,
        55% {
          outline: 2px solid var(--accent);
          outline-offset: -2px;
          box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 32%, transparent);
        }
        100% {
          outline-color: transparent;
          box-shadow: none;
        }
      }

      body.animations-disabled .deadline-group.today::before,
      body.animations-disabled .dashboard-agenda-highlight {
        animation: none !important;
      }

      @media (prefers-reduced-motion: reduce) {
        .deadline-group.today::before,
        .dashboard-agenda-highlight {
          animation: none !important;
        }
      }

      /* 04. PAGINI SI MODULE FUNCTIONALE ---------------------------------------- */
      .page-section {
        display: none;
      }

      .page-section.active {
        display: block;
      }

      .data-table {
        width: 100%;
        border-collapse: collapse;
      }

      .data-table th {
        text-align: left;
        padding: 12px 16px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #536866;
        border-bottom: 1px solid var(--border);
        background: #e8eeee;
      }

      .sortable-th {
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
      }

      .sortable-th:hover {
        color: var(--accent);
        background: #e7ecf2;
      }

      .sort-header {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

      .sort-header i {
        font-size: 11px;
        color: var(--accent);
      }

      .sort-helper {
        display: block;
        font-size: 10px;
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0;
        color: var(--text-secondary);
        margin-top: 3px;
      }

      .data-table td {
        padding: 16px;
        font-size: 14px;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
      }

      .data-table tr:hover td {
        background: #f8fafc;
      }

      .btn {
        padding: 8px 16px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        border: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s;
      }

      .btn-primary {
        background: var(--accent);
        color: white;
      }

      .btn-primary:hover {
        background: var(--primary-hover);
      }

      .btn-outline {
        background: transparent;
        border: 1px solid var(--border);
        color: var(--text-primary);
      }

      .btn-outline:hover {
        background: var(--bg-soft);
      }

      .btn-outline.active {
        background: var(--accent-light);
        border-color: var(--accent);
        color: var(--accent);
      }

      .btn-danger {
        background: var(--danger);
        color: white;
      }

      .btn-success {
        background: var(--success);
        color: white;
      }

      .btn-sm {
        padding: 4px 8px;
        font-size: 12px;
      }

      .toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        flex-wrap: wrap;
        gap: 12px;
      }

      .toolbar-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }

      .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 8px;
      }

      .calendar-day-header {
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-secondary);
        padding: 8px;
        text-transform: uppercase;
      }

      .calendar-day {
        aspect-ratio: 1;
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 8px;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s;
        position: relative;
        background: var(--bg-card);
      }

      .calendar-grid.compact-month {
        column-gap: 0;
        row-gap: 5px;
      }

      .calendar-grid.compact-month .calendar-day-header {
        padding: 4px;
        font-size: 11px;
      }

      .calendar-grid.compact-month .calendar-day {
        aspect-ratio: auto;
        min-height: 96px;
        padding: 6px;
        font-size: 12px;
        border-radius: 0;
      }

      .calendar-grid.compact-month .calendar-day:nth-child(7n + 1) {
        border-top-left-radius: 7px;
        border-bottom-left-radius: 7px;
      }

      .calendar-grid.compact-month .calendar-day:nth-child(7n) {
        border-top-right-radius: 7px;
        border-bottom-right-radius: 7px;
      }

      .calendar-grid.compact-month .calendar-events {
        font-size: 10px;
        margin-top: 3px;
        line-height: 1.25;
      }

      .calendar-grid.compact-month .calendar-day.has-event::after {
        display: none;
      }

      .calendar-grid.compact-month .calendar-day.has-event:not(.today),
      .calendar-grid.compact-month .calendar-day.in-project:not(.today),
      .calendar-grid.compact-month .calendar-day.has-task:not(.today) {
        border-color: transparent;
      }

      .calendar-day:hover {
        border-color: var(--accent);
      }

      .calendar-day.today {
        background: var(--accent-light);
        border-color: var(--accent);
        font-weight: 700;
      }

      .calendar-day.weekend:not(.today) {
        background: var(--weekend-bg);
      }

      .calendar-day.other-month {
        color: var(--text-muted);
        background: var(--bg-soft);
      }

      .calendar-day.other-month.weekend {
        background: var(--weekend-bg);
        color: var(--text-muted);
      }

      .calendar-day.has-event::after {
        content: "";
        position: absolute;
        bottom: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
      }

      .calendar-day.has-event.urgent::after {
        background: var(--danger);
      }

      .calendar-events {
        font-size: 9px;
        margin-top: 4px;
        color: var(--text-secondary);
        line-height: 1.3;
        overflow: hidden;
      }

      .calendar-grid.compact-month .calendar-events.manual-event {
        color: #8a6500;
      }

      body.dark-mode .calendar-grid.compact-month .calendar-events.manual-event {
        color: #facc15;
      }

      .calendar-grid.compact-month .calendar-events.manual-event .calendar-entry-icon {
        color: inherit;
      }

      .calendar-entry-icon {
        width: 1.15em;
        margin-right: 4px;
        text-align: center;
        color: var(--accent);
        font-size: 0.95em;
      }

      .calendar-entry-icon.task {
        color: var(--calendar-task);
      }

      .calendar-entry-icon.deadline {
        color: var(--danger);
      }

      .calendar-events.done {
        text-decoration: line-through;
        color: var(--text-muted);
      }

      .calendar-day.in-project {
        box-shadow: none;
      }

      .calendar-project-bars {
        position: absolute;
        left: 6px;
        right: 6px;
        bottom: 6px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        pointer-events: none;
      }

      .calendar-project-bar {
        height: 4px;
        border-radius: 999px;
        width: 100%;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
      }

      .calendar-day-number {
        position: relative;
        z-index: 2;
      }

      .calendar-flow-bar {
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(5px + (var(--lane, 0) * 5px));
        height: 4px;
        border-radius: 0;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
        pointer-events: none;
        z-index: 1;
      }

      .calendar-flow-bar.start {
        left: 5px;
        border-radius: 999px 0 0 999px;
      }

      .calendar-flow-bar.end {
        right: 5px;
        border-radius: 0 999px 999px 0;
      }

      .calendar-flow-bar.single {
        left: 5px;
        right: 5px;
        border-radius: 999px;
      }

      .calendar-day.in-project .calendar-events:last-of-type {
        padding-bottom: 22px;
      }

      .calendar-day:hover,
      .calendar-day:focus-within {
        z-index: 20;
      }

      .calendar-project-overflow,
      .year-project-count-badge {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: #0b4a4a;
        color: #fff;
        font-weight: 800;
        cursor: help;
        outline: none;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
      }

      .calendar-project-overflow {
        position: absolute;
        top: 5px;
        right: 5px;
        z-index: 5;
        padding: 2px 6px;
        font-size: 8px;
        line-height: 1.35;
      }

      .project-overflow-tooltip {
        position: absolute;
        top: calc(100% + 7px);
        right: 0;
        z-index: 50;
        width: max-content;
        min-width: 210px;
        max-width: 280px;
        padding: 9px 10px;
        border-radius: 9px;
        background: #102f2d;
        color: #fff;
        box-shadow: 0 10px 28px rgba(8, 25, 24, 0.28);
        font-size: 10px;
        font-weight: 500;
        line-height: 1.35;
        text-align: left;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-3px);
        transition:
          opacity 0.15s ease,
          transform 0.15s ease,
          visibility 0.15s ease;
        pointer-events: none;
      }

      .calendar-project-overflow:hover .project-overflow-tooltip,
      .calendar-project-overflow:focus .project-overflow-tooltip,
      .year-project-count-badge:hover .project-overflow-tooltip,
      .year-project-count-badge:focus .project-overflow-tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }

      .project-overflow-tooltip-title {
        display: block;
        margin-bottom: 6px;
        padding-bottom: 5px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.35px;
      }

      .project-overflow-item {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 3px 0;
        white-space: normal;
      }

      .project-overflow-dot {
        width: 7px;
        height: 7px;
        border-radius: 999px;
        flex: 0 0 auto;
      }

      .project-color-picker {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }

      .project-color-input {
        width: 52px;
        height: 40px;
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 4px;
        background: var(--bg-card);
        cursor: pointer;
      }

      .project-color-presets {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }

      .project-color-preset {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid #fff;
        box-shadow: 0 0 0 1px var(--border);
        cursor: pointer;
        transition:
          transform 0.15s ease,
          box-shadow 0.15s ease;
      }

      .project-color-preset:hover {
        transform: translateY(-1px);
        box-shadow: 0 0 0 2px var(--accent);
      }

      .project-color-note {
        font-size: 12px;
        color: var(--text-secondary);
        margin-top: 6px;
      }

      .calendar-view-switch {
        display: flex;
        align-items: center;
        gap: 4px;
        background: #c6d2d1;
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 4px;
      }

      .main-content:has(#calendar.active) {
        min-width: 0;
      }

      #calendar .calendar-toolbar-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        min-width: 0;
        max-width: 100%;
        margin-left: auto;
        grid-column: 1 / -1;
      }

      #calendar .calendar-responsabil-filter {
        flex: 0 1 200px;
        width: 200px;
        min-width: 0;
        padding: 7px 28px 7px 10px;
        font-size: 12px;
        text-overflow: ellipsis;
      }

      #calendar .calendar-toolbar-actions > .btn {
        flex-shrink: 0;
      }

      .calendar-view-btn {
        border: none;
        background: transparent;
        color: var(--text-secondary);
        padding: 7px 12px;
        border-radius: 7px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
      }

      .calendar-view-btn.active {
        background: var(--bg-card);
        color: var(--accent);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      }

      .year-calendar-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: minmax(320px, auto);
        gap: 16px;
      }

      .year-month-card {
        display: flex;
        flex-direction: column;
        height: auto;
        min-width: 0;
        box-sizing: border-box;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 14px;
        min-height: 210px;
        box-shadow: var(--shadow);
      }

      .year-month-header {
        display: flex;
        flex-shrink: 0;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .year-month-header span:last-child {
        font-size: 11px;
        color: var(--text-secondary);
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0;
      }

      .year-month-card:hover,
      .year-month-card:focus-within {
        position: relative;
        z-index: 10;
      }

      .year-month-header-meta {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        flex-wrap: wrap;
      }

      .year-project-count-badge {
        padding: 3px 7px;
        font-size: 8px;
        text-transform: none;
        letter-spacing: 0;
      }

      .year-project-count-badge .project-overflow-tooltip {
        top: calc(100% + 6px);
      }

      .year-month-header .project-overflow-tooltip,
      .year-month-header .project-overflow-tooltip span {
        color: #fff;
        font-size: 10px;
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0;
      }

      .year-month-header .project-overflow-tooltip-title {
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.35px;
      }

      .year-mini-days {
        display: grid;
        flex-shrink: 0;
        grid-template-columns: repeat(7, 1fr);
        column-gap: 0;
        row-gap: 4px;
        margin-bottom: 10px;
        color: #94a3b8;
        font-size: 9px;
        text-align: center;
      }

      .year-mini-weekday {
        padding-bottom: 2px;
        font-weight: 700;
      }

      .year-mini-day {
        height: 26px;
        border: 1px solid transparent;
        border-radius: 0;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        position: relative;
        padding: 2px 2px 8px;
        background: var(--bg-card);
        overflow: hidden;
        cursor: pointer;
      }

      .year-mini-day:nth-child(7n + 1) {
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
      }

      .year-mini-day:nth-child(7n) {
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
      }

      .year-mini-day:hover {
        border-color: var(--accent);
      }

      .year-mini-day.blank {
        background: transparent;
        border-color: transparent;
        cursor: default;
      }

      .year-mini-day.blank:hover {
        border-color: transparent;
      }

      .year-mini-day.has-event {
        border-color: transparent;
        color: inherit;
        font-weight: inherit;
      }

      .year-mini-day.has-event:hover {
        border-color: var(--accent);
      }

      .year-mini-day.active-project {
        box-shadow: none;
      }

      .year-mini-day.has-task {
        border-color: transparent;
      }

      .year-mini-day.weekend:not(.today) {
        background: var(--weekend-bg);
      }

      .year-mini-day.today {
        background: var(--accent-light);
        border-color: var(--accent);
        box-shadow: inset 0 0 0 1px rgba(46, 139, 122, 0.35);
      }

      /* Evidențiere dedicată evenimentelor manuale în ambele calendare. */
      .calendar-grid.compact-month .calendar-day.has-calendar-event,
      .year-mini-day.has-calendar-event {
        border-color: #facc15 !important;
        box-shadow:
          inset 0 0 0 1px rgba(250, 204, 21, 0.68),
          0 0 10px rgba(250, 204, 21, 0.22) !important;
      }

      .calendar-grid.compact-month .calendar-day.has-calendar-event:hover,
      .year-mini-day.has-calendar-event:hover {
        border-color: #fde047 !important;
        box-shadow:
          inset 0 0 0 1px rgba(253, 224, 71, 0.82),
          0 0 13px rgba(250, 204, 21, 0.32) !important;
      }

      .year-mini-day.today .year-mini-day-number {
        background: var(--accent);
        color: #fff;
        border-radius: 999px;
        min-width: 14px;
        height: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
      }

      .year-mini-day-number {
        position: relative;
        z-index: 2;
        font-size: 9px;
        line-height: 1;
      }

      .year-mini-flow-bar {
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(2px + (var(--lane, 0) * 4px));
        height: 3px;
        border-radius: 0;
        box-shadow: 0 1px 1px rgba(15, 23, 42, 0.12);
        pointer-events: none;
        z-index: 1;
      }

      .year-mini-flow-bar.start {
        left: 2px;
        border-radius: 999px 0 0 999px;
      }

      .year-mini-flow-bar.end {
        right: 2px;
        border-radius: 0 999px 999px 0;
      }

      .year-mini-flow-bar.single {
        left: 2px;
        right: 2px;
        border-radius: 999px;
      }

      .year-mini-marker-row {
        position: absolute;
        right: 2px;
        top: 2px;
        display: flex;
        gap: 2px;
        pointer-events: none;
        z-index: 3;
      }

      .year-mini-marker {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        box-shadow: 0 0 0 1px var(--bg-card);
      }

      .year-mini-task-icon {
        color: var(--calendar-task);
        font-size: 7px;
        line-height: 1;
      }

      .year-mini-reminder-icon {
        color: #facc15;
        font-size: 8px;
        line-height: 1;
        filter: drop-shadow(0 0 3px rgba(250, 204, 21, 0.72));
      }

      .calendar-reminder-icon {
        color: #facc15;
        margin-right: 5px;
        filter: drop-shadow(0 0 4px rgba(250, 204, 21, 0.58));
      }

      .calendar-reminder-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-left: 7px;
        padding: 2px 7px;
        border: 1px solid rgba(202, 138, 4, 0.3);
        border-radius: 999px;
        background: rgba(250, 204, 21, 0.15);
        color: #854d0e;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.35;
        vertical-align: middle;
      }

      .year-mini-marker.manual {
        background: var(--info);
      }

      .year-mini-marker.aviz {
        background: var(--purple);
      }

      .year-mini-marker.studiu {
        background: var(--accent-secondary);
      }

      .year-mini-task-dots {
        position: absolute;
        right: 2px;
        top: 2px;
        display: flex;
        gap: 1px;
        pointer-events: none;
      }

      .year-mini-task-dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--success);
      }

      .year-mini-task-dot.medium {
        background: var(--warning);
      }

      .year-mini-task-dot.high {
        background: var(--danger);
      }

      .year-mini-overflow {
        position: absolute;
        right: 1px;
        bottom: 7px;
        font-size: 7px;
        line-height: 1;
        color: var(--text-secondary);
        font-weight: 700;
      }

      .year-events {
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
        gap: 6px;
        min-height: 0;
        /* Cardul creste cu lista; scroll-ul se activeaza doar peste 3 intrari. */
        overflow: visible;
      }

      .year-events.scrollable,
      .year-events:has(> .year-event:nth-child(4)) {
        max-height: 138px;
        overflow-y: scroll;
        padding-right: 7px;
        scrollbar-gutter: stable;
        scrollbar-width: auto;
        scrollbar-color: rgba(15, 92, 82, 0.62) transparent;
        overscroll-behavior: contain;
      }

      .year-events.scrollable::-webkit-scrollbar,
      .year-events:has(> .year-event:nth-child(4))::-webkit-scrollbar {
        width: 6px;
      }

      .year-events.scrollable::-webkit-scrollbar-track,
      .year-events:has(> .year-event:nth-child(4))::-webkit-scrollbar-track {
        background: transparent;
      }

      .year-events.scrollable::-webkit-scrollbar-thumb,
      .year-events:has(> .year-event:nth-child(4))::-webkit-scrollbar-thumb {
        background: rgba(15, 92, 82, 0.62);
        border-radius: 999px;
      }

      .year-events.scrollable::-webkit-scrollbar-thumb:hover,
      .year-events:has(> .year-event:nth-child(4))::-webkit-scrollbar-thumb:hover {
        background: rgba(15, 92, 82, 0.82);
      }

      .year-event {
        flex: 0 0 auto;
        border-radius: 8px;
        padding: 7px 9px;
        font-size: 11px;
        line-height: 1.25;
        border-left: 4px solid var(--accent);
        background: var(--bg-soft);
        overflow: hidden;
      }

      .year-events.scrollable .year-event,
      .year-events:has(> .year-event:nth-child(4)) .year-event {
        height: 42px;
        min-height: 42px;
        flex: 0 0 auto;
        box-sizing: border-box;
      }

      .year-event strong {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 11px;
      }

      .year-event span {
        display: block;
        color: var(--text-secondary);
        margin-top: 2px;
      }

      .year-event.compact-entry {
        display: flex;
        align-items: center;
        gap: 7px;
        min-height: 30px;
        padding: 5px 8px;
      }

      .year-event.compact-entry strong {
        display: flex;
        align-items: center;
        gap: 5px;
        flex: 0 1 auto;
        min-width: 0;
      }

      .year-event.compact-entry > span {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .year-event.compact-entry .recurrence-prefix {
        display: inline-flex;
        flex: 0 0 auto;
        margin: 0;
        color: var(--accent-secondary);
      }

      .year-events.scrollable .year-event.compact-entry,
      .year-events:has(> .year-event:nth-child(4)) .year-event.compact-entry {
        height: 30px;
        min-height: 30px;
      }

      .year-event.recurring-task-entry {
        display: grid;
        grid-template-columns: auto minmax(0, auto) minmax(0, 1fr);
        align-items: center;
        gap: 5px;
        min-height: 30px;
        padding: 5px 8px;
      }

      .year-event.recurring-task-entry > i {
        color: var(--accent-secondary);
      }

      .year-event.recurring-task-entry > strong,
      .year-event.recurring-task-entry > span {
        display: block;
        min-width: 0;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .year-events.scrollable .year-event.recurring-task-entry,
      .year-events:has(> .year-event:nth-child(4)) .year-event.recurring-task-entry {
        height: 30px;
        min-height: 30px;
      }

      .calendar-delivery-label,
      .year-event-delivery-label {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        color: var(--danger);
        font-weight: 700;
      }

      .calendar-delivery-icon,
      .year-event-delivery-icon {
        font-size: 0.9em;
      }

      .year-events.scrollable .year-event span,
      .year-events:has(> .year-event:nth-child(4)) .year-event span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .year-event.period {
        background: #fff7e6;
        border-left-color: var(--accent);
      }

      .year-event.start {
        background: var(--success-soft);
        border-left-color: var(--success);
      }

      .year-event.deadline {
        background: var(--danger-soft);
        border-left-color: var(--danger);
      }

      .year-event.manual {
        background: rgba(250, 204, 21, 0.12);
        border-left-color: #facc15;
        box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.24);
      }

      .year-event.aviz {
        background: var(--purple-soft);
        border-left-color: var(--purple);
      }

      .year-event.studiu {
        background: var(--info-soft);
        border-left-color: var(--accent-secondary);
      }

      .year-event.task {
        background: var(--success-soft);
        border-left-color: var(--calendar-task);
      }

      .year-event.task.done strong,
      .year-event.manual.done strong {
        text-decoration: line-through;
        color: #64748b;
      }

      .year-event.studiu.done strong {
        text-decoration: line-through;
        color: #64748b;
      }

      .year-empty {
        font-size: 11px;
        color: #94a3b8;
        padding: 8px 0;
      }

      .calendar-legend {
        margin-top: 16px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: var(--shadow);
        padding: 14px 16px;
      }

      .calendar-legend.hidden {
        display: none;
      }

      .calendar-legend-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-secondary);
      }

      .calendar-legend-items {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .calendar-legend-item {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-width: 0;
        flex: 0 0 auto;
        box-sizing: border-box;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: #edeeed;
      }

      .calendar-legend-item.calendar-legend-event {
        border-color: #facc15;
        background: rgba(250, 204, 21, 0.1);
        box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.34);
      }

      .calendar-legend-swatch {
        width: 12px;
        height: 36px;
        border-radius: 999px;
        flex: 0 0 auto;
      }

      .calendar-legend-main {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
      }

      .calendar-legend-name {
        display: block;
        font-size: 13px;
        font-weight: 700;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
      }

      .calendar-legend-meta {
        display: block;
        font-size: 12px;
        color: var(--text-secondary);
        line-height: 1.35;
      }

      .calendar-legend-empty {
        font-size: 13px;
        color: var(--text-secondary);
      }

      @media (max-width: 1200px) {
        .year-calendar-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      @media (max-width: 768px) {
        .year-calendar-grid {
          grid-template-columns: 1fr;
        }
      }

      .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 200;
        backdrop-filter: blur(4px);
      }

      .modal-overlay.active {
        display: flex;
      }

      .modal {
        background: var(--bg-card);
        border-radius: 16px;
        width: 90%;
        max-width: 720px;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        scrollbar-width: thin;
        scrollbar-color: #aebdbb #eef2f1;
      }

      .modal::-webkit-scrollbar {
        width: 10px;
      }

      .modal::-webkit-scrollbar-track {
        background: #eef2f1;
        border-radius: 999px;
      }

      .modal::-webkit-scrollbar-thumb {
        background: #aebdbb;
        border-radius: 999px;
        border: 2px solid var(--bg-card);
      }

      .modal-header {
        padding: 20px 24px;
        border-bottom: 1px solid var(--border);
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .modal-title {
        font-size: 18px;
        font-weight: 600;
      }

      .modal-close {
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
        color: var(--text-secondary);
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .modal-close:hover {
        background: var(--bg-soft);
      }

      .modal-body {
        padding: 0;
      }

      .modal-footer {
        padding: 16px 24px;
        border-top: 1px solid var(--border);
        display: flex;
        justify-content: flex-end;
        gap: 8px;
      }

      .modal-footer:has(> .modal-delete-btn) {
        flex-direction: row;
        align-items: center;
      }

      .modal-footer > .btn.modal-delete-btn {
        flex: 0 0 42px;
        width: 42px;
        min-width: 42px;
        height: 42px;
        margin-right: auto;
        padding: 0;
        justify-content: center;
        color: var(--danger);
      }

      .modal-footer > .modal-delete-btn:hover {
        background: var(--danger-soft);
        border-color: var(--danger);
      }

      .form-group {
        margin-bottom: 16px;
      }

      .form-label {
        display: block;
        font-size: 13px;
        font-weight: 500;
        margin-bottom: 6px;
        color: var(--text-primary);
      }

      .form-input,
      .form-select,
      .form-textarea {
        width: 100%;
        padding: 10px 14px;
        border: 1px solid var(--border);
        border-radius: 8px;
        font-size: 14px;
        font-family: inherit;
        outline: none;
        transition: border-color 0.2s;
      }

      .form-input:focus,
      .form-select:focus,
      .form-textarea:focus {
        border-color: var(--accent);
      }

      .form-textarea {
        resize: vertical;
        min-height: 80px;
      }

      .responsabili-picker {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .responsabili-add-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
        align-items: center;
      }

      .responsabili-chip-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        min-height: 34px;
        padding: 6px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--bg-card);
      }

      .responsabil-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 8px;
        border-radius: 999px;
        background: var(--accent-soft);
        color: var(--accent-primary);
        font-size: 12px;
        font-weight: 700;
      }

      .responsabil-chip button {
        border: 0;
        background: transparent;
        color: inherit;
        cursor: pointer;
        padding: 0;
        line-height: 1;
        display: inline-flex;
      }

      .responsabili-empty {
        font-size: 12px;
        color: var(--text-secondary);
        align-self: center;
      }

      .project-count-inline {
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .project-list-button {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: var(--bg-card);
        color: var(--accent);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.15s ease;
      }

      .project-list-button:hover {
        background: var(--accent-soft);
        border-color: var(--accent);
        transform: translateY(-1px);
      }

      .project-list-button:disabled {
        opacity: 0.45;
        cursor: not-allowed;
        transform: none;
      }

      .linked-project-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .linked-project-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 14px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--bg-card);
      }

      .linked-project-title {
        font-weight: 700;
        color: var(--text-primary);
      }

      .linked-project-meta {
        font-size: 12px;
        color: var(--text-secondary);
        margin-top: 3px;
      }

      .mobile-menu-btn {
        display: none;
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
        color: var(--text-primary);
      }

      @media (max-width: 1024px) {
        .stats-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .dashboard-grid {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 768px) {
        .sidebar {
          transform: translateX(-100%);
        }
        .sidebar.open {
          transform: translateX(0);
        }
        .main-content {
          margin-left: 0;
        }
        .mobile-menu-btn {
          display: block;
        }
        .stats-grid {
          grid-template-columns: 1fr;
        }
        .search-box input {
          width: 160px;
        }
      }

      .chart-container {
        height: 300px;
        position: relative;
      }

      .bar-chart {
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        height: 100%;
        padding: 20px 0;
        gap: 12px;
      }

      .bar-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
      }

      .bar {
        width: 100%;
        max-width: 40px;
        background: var(--accent);
        border-radius: 6px 6px 0 0;
        transition: height 0.5s ease;
        min-height: 4px;
      }

      .bar-label {
        font-size: 12px;
        color: var(--text-secondary);
        font-weight: 500;
      }

      .bar-value {
        font-size: 11px;
        font-weight: 600;
        color: var(--text-primary);
      }

      /* Grafice circulare pentru distributia proiectelor pe status. */
      #rapoarte .status-chart-container {
        height: auto;
        min-height: 250px;
        overflow: visible;
      }

      #statusChart.status-donut-chart {
        display: grid;
        grid-template-columns: repeat(6, minmax(100px, 1fr));
        align-items: center;
        gap: 18px;
        height: auto;
        min-height: 250px;
        padding: 28px 18px 24px;
      }

      .status-donut-item {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        text-align: center;
      }

      .status-donut-visual {
        position: relative;
        width: 112px;
        height: 112px;
      }

      .status-donut-svg {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
        transform: rotate(-90deg);
      }

      .status-donut-track,
      .status-donut-progress {
        fill: none;
        stroke-width: 9;
      }

      .status-donut-track {
        stroke: var(--border);
        opacity: 0.72;
      }

      .status-donut-progress {
        stroke: var(--donut-color);
        stroke-linecap: round;
        stroke-dasharray: var(--donut-progress) 100;
        stroke-dashoffset: 100;
        filter: drop-shadow(0 0 4px rgba(46, 139, 122, 0.24));
        animation: statusDonutDraw 0.9s cubic-bezier(0.22, 0.72, 0.22, 1) var(--donut-delay, 0s) forwards;
      }

      .status-donut-center {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: scale(0.82);
        animation: statusDonutCenterIn 0.32s ease-out calc(0.48s + var(--donut-delay, 0s)) forwards;
      }

      .status-donut-count {
        color: var(--text-primary);
        font-size: 24px;
        font-weight: 700;
        line-height: 1;
      }

      .status-donut-label {
        min-height: 30px;
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.25;
      }

      @keyframes statusDonutDraw {
        to {
          stroke-dashoffset: 0;
        }
      }

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

      @media (max-width: 1100px) {
        #statusChart.status-donut-chart {
          grid-template-columns: repeat(3, minmax(110px, 1fr));
        }
      }

      @media (max-width: 560px) {
        #statusChart.status-donut-chart {
          grid-template-columns: repeat(2, minmax(105px, 1fr));
          gap: 22px 12px;
          padding-right: 6px;
          padding-left: 6px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .status-donut-progress,
        .status-donut-center {
          animation: none;
        }
        .status-donut-progress {
          stroke-dashoffset: 0;
        }
        .status-donut-center {
          opacity: 1;
          transform: none;
        }
      }

      .monthly-finance-chart {
        align-items: stretch;
        padding-top: 28px;
      }

      .monthly-finance-chart .bar-item {
        height: 100%;
        justify-content: flex-end;
        gap: 6px;
        position: relative;
      }

      .monthly-finance-values {
        position: absolute;
        top: -18px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 5px;
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
      }

      .monthly-finance-values .income {
        color: var(--success);
      }

      .monthly-finance-values .expense {
        color: var(--danger);
      }

      .monthly-finance-bars {
        height: 220px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 5px;
        width: 100%;
      }

      .monthly-finance-bar {
        width: 16px;
        border-radius: 5px 5px 0 0;
        min-height: 0;
        transition: height 0.45s ease;
      }

      .monthly-finance-bar.income {
        background: var(--success);
      }

      .monthly-finance-bar.expense {
        background: var(--danger);
      }

      .monthly-finance-chart {
        display: block;
        position: relative;
        height: 100%;
        padding: 0;
        border-radius: 10px;
        overflow: hidden;
        background: linear-gradient(180deg, rgba(15, 92, 46, 0.05), rgba(15, 92, 46, 0));
      }

      .finance-area-chart {
        width: 100%;
        height: 100%;
        display: block;
        overflow: visible;
      }

      .finance-chart-grid {
        stroke: rgba(107, 125, 123, 0.22);
        stroke-width: 1;
      }

      .finance-chart-axis-label {
        fill: var(--text-secondary);
        font-family: "Inter", sans-serif;
        font-size: 12px;
        font-weight: 500;
      }

      .finance-chart-value {
        font-size: 11px;
        font-weight: 700;
      }

      .finance-chart-value.income {
        fill: var(--success);
      }

      .finance-chart-value.expense {
        fill: var(--danger);
      }

      .finance-chart-line {
        fill: none;
        stroke-width: 1.35;
        stroke-linecap: round;
        stroke-linejoin: round;
        filter: url(#financeGlow);
      }

      .finance-chart-line.income {
        stroke: var(--success);
      }

      .finance-chart-line.expense {
        stroke: var(--danger);
      }

      .finance-chart-area {
        opacity: 1;
        pointer-events: none;
      }

      .finance-chart-area.income {
        fill: url(#financeGradientIncome);
      }

      .finance-chart-area.expense {
        fill: url(#financeGradientExpense);
      }

      .finance-chart-dot {
        stroke: var(--bg-card);
        stroke-width: 2;
      }

      .finance-chart-dot.income {
        fill: var(--success);
      }

      .finance-chart-dot.expense {
        fill: var(--danger);
      }

      /* Animatie grafic financiar: linie, suprafata, puncte si valori. */
      .finance-area-chart.is-animating .finance-chart-line {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: financeChartLineDraw 0.9s cubic-bezier(0.22, 0.72, 0.22, 1) forwards;
      }

      .finance-area-chart.is-animating .finance-chart-line.expense {
        animation-delay: 0.08s;
      }

      .finance-area-chart.is-animating .finance-chart-area {
        opacity: 0;
        animation: financeChartAreaReveal 0.72s ease-out 0.2s forwards;
      }

      .finance-area-chart.is-animating .finance-chart-area.expense {
        animation-delay: 0.28s;
      }

      .finance-area-chart.is-animating .finance-chart-dot {
        opacity: 0;
        transform: scale(0.35);
        transform-box: fill-box;
        transform-origin: center;
        animation: financeChartPointIn 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.35)
          calc(0.92s + var(--finance-point-delay, 0s)) forwards;
      }

      .finance-area-chart.is-animating .finance-chart-dot.expense {
        animation-delay: calc(1s + var(--finance-point-delay, 0s));
      }

      .finance-area-chart.is-animating .finance-chart-value {
        opacity: 0;
        transform: translateY(4px);
        animation: financeChartValueIn 0.3s ease-out calc(0.98s + var(--finance-point-delay, 0s)) forwards;
      }

      .finance-area-chart.is-animating .finance-chart-value.expense {
        animation-delay: calc(1.06s + var(--finance-point-delay, 0s));
      }

      @keyframes financeChartLineDraw {
        to {
          stroke-dashoffset: 0;
        }
      }

      @keyframes financeChartAreaReveal {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

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

      @keyframes financeChartValueIn {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .finance-area-chart.is-animating .finance-chart-line,
        .finance-area-chart.is-animating .finance-chart-area,
        .finance-area-chart.is-animating .finance-chart-dot,
        .finance-area-chart.is-animating .finance-chart-value {
          animation: none;
          opacity: 1;
          transform: none;
        }
        .finance-area-chart.is-animating .finance-chart-line {
          stroke-dasharray: none;
          stroke-dashoffset: 0;
        }
      }

      /* Setări accesibilitate: animații dezactivate din aplicație.
   Durata aproape nulă păstrează starea finală a graficelor animate vizibilă. */
      body.animations-disabled *,
      body.animations-disabled *::before,
      body.animations-disabled *::after {
        animation-delay: 0s !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-delay: 0s !important;
        transition-duration: 0s !important;
      }

      .report-chart-heading,
      .financial-chart-heading {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }

      .report-chart-year,
      .financial-chart-year {
        display: inline-flex;
        align-items: center;
        padding: 3px 9px;
        border-radius: 999px;
        background: var(--accent-light);
        color: var(--accent);
        font-size: 12px;
        font-weight: 700;
      }

      .report-year-select,
      .finance-year-select {
        width: auto;
        min-width: 108px;
        padding: 7px 30px 7px 10px;
        font-size: 13px;
      }

      .financial-chart-header {
        gap: 14px 20px;
        flex-wrap: wrap;
      }

      .financial-chart-totals {
        display: flex;
        flex: 1 1 430px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
      }

      .financial-chart-total {
        display: inline-flex;
        align-items: baseline;
        gap: 8px;
        min-width: 210px;
        padding: 7px 11px;
        border: 1px solid var(--border);
        border-radius: 9px;
        background: color-mix(in srgb, var(--bg-card) 82%, transparent);
        white-space: nowrap;
      }

      .financial-chart-total span {
        color: var(--text-secondary);
        font-size: 11px;
        font-weight: 700;
      }

      .financial-chart-total strong {
        margin-left: auto;
        font-size: 13px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
      }

      .financial-chart-total.income strong {
        color: var(--success);
      }

      .financial-chart-total.expense strong {
        color: var(--danger);
      }

      body.dark-mode .finance-chart-grid {
        stroke: rgba(198, 210, 209, 0.14);
      }

      body.dark-mode .finance-chart-dot {
        stroke: var(--bg-card);
      }

      .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: var(--text-secondary);
      }

      .empty-state i {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.3;
      }

      .empty-state h3 {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 8px;
        color: var(--text-primary);
      }

      .task-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .task-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        transition: all 0.2s;
      }

      .task-card:hover {
        box-shadow: var(--shadow);
        border-color: var(--border-strong);
      }

      .overdue-email-btn {
        color: var(--danger);
      }

      .overdue-email-btn:hover,
      .overdue-email-btn:focus-visible {
        color: var(--danger);
        border-color: color-mix(in srgb, var(--danger) 58%, var(--border));
        background: color-mix(in srgb, var(--danger) 12%, transparent);
      }

      .task-email-btn:not(.overdue-email-btn) {
        color: var(--text-primary);
      }

      .task-card.dashboard-task-highlight {
        animation: dashboardTaskHighlight 1s cubic-bezier(0.2, 0.72, 0.2, 1) both;
      }

      @keyframes dashboardTaskHighlight {
        0% {
          border-color: var(--accent);
          box-shadow:
            0 0 0 0 color-mix(in srgb, var(--accent) 62%, transparent),
            0 0 28px color-mix(in srgb, var(--accent) 28%, transparent);
          transform: translateX(0);
        }
        38% {
          border-color: var(--accent);
          box-shadow:
            0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent),
            0 0 34px color-mix(in srgb, var(--accent) 34%, transparent);
          transform: translateX(5px);
        }
        100% {
          border-color: var(--border);
          box-shadow: none;
          transform: translateX(0);
        }
      }

      .task-checkbox {
        width: 20px;
        height: 20px;
        border-radius: 6px;
        border: 2px solid var(--border);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.2s;
      }

      .task-checkbox.checked {
        background: var(--success);
        border-color: var(--success);
        color: white;
      }

      .task-sync-state {
        width: 20px;
        height: 20px;
        border-radius: 6px;
        background: var(--bg-soft);
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 11px;
        border: 1px solid var(--border);
      }

      .task-sync-state.done {
        background: var(--success-soft);
        color: #166534;
        border-color: #bbf7d0;
      }

      .task-content {
        flex: 1;
      }

      .item-view-trigger,
      .data-view-trigger {
        appearance: none;
        border: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        margin: 0;
        padding: 0;
        text-align: left;
        cursor: pointer;
      }

      .task-content.item-view-trigger {
        display: block;
        min-width: 0;
      }

      .item-view-trigger:hover .task-title,
      .item-view-trigger:focus-visible .task-title,
      .data-view-trigger:hover,
      .data-view-trigger:focus-visible {
        color: var(--accent);
        text-decoration: underline;
        text-underline-offset: 3px;
      }

      .item-view-trigger:focus-visible,
      .data-view-trigger:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 4px;
        border-radius: 4px;
      }

      .viewer-checklist {
        display: grid;
        gap: 7px;
        font-weight: 400;
      }

      .viewer-checklist-item {
        display: flex;
        align-items: flex-start;
        gap: 8px;
      }

      .viewer-checklist-item i {
        margin-top: 3px;
        color: var(--text-secondary);
      }

      .viewer-checklist-item.done {
        color: var(--text-secondary);
        text-decoration: line-through;
      }

      .task-title {
        font-weight: 500;
        font-size: 14px;
        margin-bottom: 4px;
      }

      .task-title.done {
        text-decoration: line-through;
        color: var(--text-secondary);
      }

      .task-meta {
        font-size: 12px;
        color: var(--text-secondary);
      }

      /* Liste de taskuri */
      .task-list-card {
        display: block;
        padding: 0;
        overflow: hidden;
      }

      .task-list-card-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
      }

      .task-list-card-header .task-content {
        min-width: 0;
      }

      .task-list-indicator {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-right: 9px;
        padding: 3px 8px;
        border-radius: 999px;
        background: var(--primary-soft);
        color: var(--primary);
        font-size: 11px;
        font-weight: 700;
        vertical-align: middle;
        text-decoration: none;
      }

      .task-list-indicator i {
        font-size: 12px;
      }

      .task-list-progress {
        white-space: nowrap;
        color: var(--text-secondary);
        font-size: 11px;
        font-weight: 700;
      }

      .task-list-actions {
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .task-list-expand i {
        transition: transform 0.2s ease;
      }

      .task-list-card.expanded .task-list-expand i {
        transform: rotate(180deg);
      }

      .task-subitems {
        display: none;
        padding: 4px 16px 12px 48px;
        border-top: 1px solid var(--border);
        background: linear-gradient(90deg, var(--bg-soft), transparent 72%);
      }

      .task-list-card.expanded .task-subitems {
        display: block;
      }

      .recurring-series-group {
        display: grid;
        gap: 8px;
        margin-bottom: 12px;
        padding: 10px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: color-mix(in srgb, var(--accent) 5%, var(--bg-card));
      }
      .recurring-series-items {
        display: grid;
        gap: 8px;
      }
      .recurring-series-items .task-card {
        margin: 0;
      }
      .recurring-series-summary {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
      }
      .recurring-series-title {
        font-weight: 700;
        color: var(--text-primary);
      }
      .recurring-series-title i {
        margin-right: 6px;
        color: var(--accent);
      }
      .recurring-series-counts {
        flex: 1;
        color: var(--text-secondary);
        font-size: 12px;
      }
      .recurring-series-table-summary td {
        padding: 10px 14px !important;
        background: color-mix(in srgb, var(--accent) 6%, var(--bg-card));
      }
      .recurring-series-child td:first-child {
        box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
      }

      @media (max-width: 700px) {
        .recurring-series-summary {
          align-items: flex-start;
          flex-wrap: wrap;
        }
        .recurring-series-counts {
          flex-basis: 100%;
        }
      }

      .task-subitem {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 38px;
        padding: 7px 0;
        border-bottom: 1px solid var(--border);
      }

      .task-subitem:last-child {
        border-bottom: 0;
      }

      .task-subitem .task-checkbox {
        width: 18px;
        height: 18px;
        border-radius: 5px;
      }

      .task-subitem-title {
        flex: 1;
        min-width: 0;
        color: var(--text-primary);
        font-size: 13px;
      }

      .task-subitem-title.done {
        color: var(--text-secondary);
        text-decoration: line-through;
      }

      .task-list-editor {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 8px;
      }

      .task-list-editor-row {
        position: relative;
        display: grid;
        grid-template-columns: 20px minmax(0, 1fr) 36px 36px;
        align-items: center;
        gap: 9px;
        padding: 8px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--bg-soft);
        transition:
          border-color 0.16s ease,
          background 0.16s ease,
          opacity 0.16s ease,
          transform 0.16s ease;
      }

      .task-list-editor-row.is-dragging {
        z-index: 1;
        border-color: var(--accent);
        background: var(--bg-card);
        opacity: 0.72;
        transform: scale(0.995);
      }

      .task-list-editor-row input[type="checkbox"] {
        width: 17px;
        height: 17px;
        accent-color: var(--success);
      }

      .task-list-editor-row .form-input {
        min-width: 0;
      }

      .task-list-editor-remove,
      .task-list-editor-drag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 0;
      }

      .task-list-editor-remove {
        color: var(--danger);
      }

      .task-list-editor-drag {
        color: var(--text-secondary);
        cursor: grab;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
      }

      .task-list-editor-drag:active,
      .task-list-editor-drag.is-active {
        cursor: grabbing;
        color: var(--accent);
      }

      .task-list-drag-dots {
        display: grid;
        grid-template-columns: repeat(2, 4px);
        grid-template-rows: repeat(2, 4px);
        gap: 4px;
        margin: auto;
        pointer-events: none;
      }

      .task-list-editor-remove > i {
        display: block;
        margin: 0;
        line-height: 1;
      }

      .task-list-drag-dots > span {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: currentColor;
      }

      body.task-list-is-sorting,
      body.task-list-is-sorting * {
        cursor: grabbing !important;
      }

      @media (max-width: 520px) {
        .task-list-editor-row {
          grid-template-columns: 18px minmax(0, 1fr) 34px 34px;
          gap: 6px;
          padding: 7px;
        }
      }

      .task-list-editor-add {
        margin-top: 10px;
        border-style: dashed;
      }

      @media (max-width: 700px) {
        .task-list-card-header {
          flex-wrap: wrap;
          align-items: flex-start;
        }
        .task-list-card-header .task-content {
          flex-basis: calc(100% - 42px);
        }
        .task-list-progress {
          margin-left: 32px;
        }
        .task-list-actions {
          margin-left: auto;
        }
        .task-subitems {
          padding-left: 16px;
        }
      }

      .notes-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 16px;
      }

      .note-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 18px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-height: 190px;
        box-shadow: var(--shadow);
      }

      .note-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
      }

      .note-card-title {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-primary);
        line-height: 1.35;
        overflow-wrap: anywhere;
      }

      .note-card-date {
        font-size: 11px;
        color: var(--text-muted);
        white-space: nowrap;
      }

      .note-card-meta {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 12px;
        color: var(--text-secondary);
      }

      .note-card-body {
        flex: 1;
        color: var(--text-secondary);
        font-size: 13px;
        line-height: 1.6;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
      }

      .note-card-link {
        color: var(--primary);
        font-weight: 600;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 2px;
        overflow-wrap: anywhere;
      }

      .note-card-link:hover {
        color: var(--primary-hover);
      }

      .note-card-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        padding-top: 10px;
        border-top: 1px solid var(--border);
      }

      .task-priority {
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 600;
      }

      .task-priority.high {
        background: var(--danger-soft);
        color: #991b1b;
      }

      .task-priority.medium {
        background: var(--warning-soft);
        color: #92400e;
      }

      .task-priority.low {
        background: var(--success-soft);
        color: #166534;
      }

      .task-overdue {
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 700;
        background: var(--danger-soft);
        color: #991b1b;
        white-space: nowrap;
      }

      .study-deadline {
        min-width: 195px;
        padding: 5px 9px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--bg-soft);
        display: flex;
        flex-direction: column;
        gap: 2px;
        white-space: nowrap;
      }

      .study-deadline-label {
        font-size: 9px;
        font-weight: 700;
        line-height: 1;
        text-transform: uppercase;
        letter-spacing: 0.45px;
        color: var(--text-muted);
      }

      .study-deadline-value {
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
        color: var(--text-primary);
      }

      .study-deadline-overdue {
        margin-left: 6px;
        color: var(--danger);
        font-weight: 800;
      }

      .calendar-task-label {
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 600;
        background: var(--success-soft);
        color: #166534;
      }

      .task-filter-panel {
        display: grid;
        grid-template-columns: 1fr 220px 220px auto;
        gap: 12px;
        align-items: end;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 18px;
        box-shadow: var(--shadow);
      }

      #taskuri .task-filter-panel {
        grid-template-columns: minmax(260px, 1fr) minmax(150px, 220px) minmax(150px, 220px) minmax(120px, 160px) auto;
      }

      #taskuri .task-filter-actions {
        align-self: end;
        white-space: nowrap;
      }

      .task-filter-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .task-filter-label {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        gap: 6px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
      }

      .task-filter-actions {
        display: flex;
        gap: 8px;
        align-items: center;
        justify-content: flex-end;
      }

      .task-filter-summary {
        font-size: 12px;
        color: var(--text-secondary);
        margin: -6px 0 14px 2px;
      }

      .finance-filter-panel {
        display: grid;
        grid-template-columns: 220px minmax(220px, 1fr) minmax(220px, 1fr) minmax(140px, auto);
      }

      .finance-filter-panel.active {
        display: grid;
      }

      .finance-filter-panel .conditional-filter {
        display: none;
      }

      .finance-filter-panel .conditional-filter.active {
        display: flex;
      }

      .finance-filter-panel .finance-period-filter.active {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }

      .finance-filter-panel .task-filter-actions {
        grid-column: 4;
        justify-self: end;
        align-self: end;
      }

      .finance-filter-panel .task-filter-actions .btn {
        white-space: nowrap;
      }

      .finance-transaction-toolbar {
        margin: 0 0 16px 0;
      }

      .finance-transaction-toolbar .search-box {
        flex: 1;
        max-width: 360px;
      }

      @media (max-width: 768px) {
        .task-filter-panel {
          grid-template-columns: 1fr;
        }
        #taskuri .task-filter-panel {
          grid-template-columns: 1fr;
        }
        .finance-filter-panel,
        .finance-filter-panel.active {
          grid-template-columns: 1fr;
        }
        .finance-filter-panel .finance-period-filter.active {
          grid-template-columns: 1fr;
        }
        .task-filter-actions {
          justify-content: flex-start;
        }
        .finance-transaction-toolbar {
          align-items: flex-start;
        }
        .finance-transaction-toolbar .search-box,
        .finance-transaction-toolbar .search-box input {
          width: 100%;
          max-width: none;
        }
      }

      @media (max-width: 768px) {
        .finance-filter-panel .task-filter-actions {
          grid-column: auto;
          justify-self: stretch;
        }
      }

      .doc-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 16px;
      }

      .doc-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 20px;
        cursor: pointer;
        transition: all 0.2s;
      }

      .doc-card:hover {
        box-shadow: var(--shadow);
        transform: translateY(-2px);
      }

      .doc-icon {
        width: 48px;
        height: 48px;
        border-radius: 10px;
        background: var(--accent-light);
        color: var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        margin-bottom: 12px;
      }

      .doc-name {
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .doc-meta {
        font-size: 12px;
        color: var(--text-secondary);
      }

      .settings-section {
        max-width: 820px;
      }

      #setari.active {
        display: flex;
        flex-direction: column;
      }
      #setari > .settings-section:first-child { order: 1; }
      #setari > .company-settings-card { order: 2; }
      #setari > .ai-journal-card { order: 3; }
      #setari > .ai-settings-card { order: 4; }

      .company-settings-card {
        margin-top: 20px;
      }

      .company-settings-intro {
        margin: -2px 0 18px;
        color: var(--text-secondary);
        font-size: 13px;
        line-height: 1.5;
      }

      .company-settings-actions {
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 4px;
      }

      .email-template-textarea {
        min-height: 220px;
        resize: vertical;
        line-height: 1.55;
      }

      .email-template-help {
        margin: 2px 0 10px;
        color: var(--text-secondary);
        font-size: 12px;
        line-height: 1.5;
      }

      .email-template-tokens {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 18px;
      }

      .email-template-token {
        display: inline-flex;
        align-items: center;
        padding: 4px 8px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
        color: var(--text-primary);
        font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
        font-size: 11px;
      }

      .company-email-status {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        min-height: 18px;
        margin-top: 6px;
        font-size: 11px;
        line-height: 1.4;
        color: var(--text-secondary);
      }

      .company-email-status.invalid {
        color: var(--danger);
      }

      .company-email-status.valid {
        color: var(--accent);
      }

      .company-email-status i {
        margin-top: 2px;
      }

      .form-input.company-email-invalid {
        border-color: var(--danger);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 18%, transparent);
      }

      .settings-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 0;
        border-bottom: 1px solid var(--border);
      }

      .settings-item:last-child {
        border-bottom: none;
      }

      .settings-info h4 {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 4px;
      }

      .settings-info p {
        font-size: 13px;
        color: var(--text-secondary);
      }

      .settings-actions {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
        justify-content: flex-end;
      }

      .backup-file-input {
        display: none;
      }

      .toggle {
        width: 44px;
        height: 24px;
        background: var(--border-strong);
        border-radius: 12px;
        position: relative;
        cursor: pointer;
        transition: background 0.2s;
      }

      .toggle.active {
        background: var(--accent);
      }

      .toggle::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        background: white;
        border-radius: 50%;
        top: 2px;
        left: 2px;
        transition: transform 0.2s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      }

      .toggle.active::after {
        transform: translateX(20px);
      }

      .modal-section {
        padding: 20px 24px;
        border-bottom: 1px solid var(--border);
      }

      .modal-section:last-of-type {
        border-bottom: none;
      }

      .modal-section-title {
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-secondary);
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .modal-section-title i {
        font-size: 14px;
      }

      .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }

      .form-row-3 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 16px;
      }

      .tabs {
        display: flex;
        gap: 4px;
        margin-bottom: 16px;
        background: var(--bg-soft);
        padding: 4px;
        border-radius: 8px;
      }

      .tab {
        flex: 1;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        text-align: center;
        border: none;
        background: transparent;
        color: var(--text-secondary);
        transition: all 0.2s;
      }

      .tab.active {
        background: var(--bg-card);
        color: var(--accent);
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
      }

      .faze-section {
        background: var(--bg-soft);
        border-radius: 8px;
        padding: 16px;
        margin-top: 16px;
      }

      .faze-title {
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 12px;
        color: var(--text-primary);
      }

      .project-urbanism-section {
        margin-bottom: 16px;
      }

      .project-urbanism-section .form-group {
        min-width: 0;
        margin-bottom: 0;
      }

      .project-urbanism-value {
        overflow-wrap: anywhere;
      }

      .faze-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
      }

      .project-structure-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        align-items: start;
      }
      .project-structure-control { min-width: 0; }
      .project-structure-control .form-label { font-size: 11px; letter-spacing: .04em; }
      .structure-trigger, .structure-option {
        width: 100%;
        font: inherit;
        font-size: 13px;
        text-align: left;
        white-space: normal;
        overflow-wrap: anywhere;
        color: var(--text-primary);
        cursor: pointer;
      }
      .structure-trigger {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        min-height: 48px;
        padding: 10px 12px;
        line-height: 1.45;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--bg-card);
      }
      .structure-trigger span { min-width: 0; }
      .structure-trigger i { flex: 0 0 auto; font-size: 11px; }
      .structure-trigger:disabled { opacity: .55; cursor: not-allowed; }
      .structure-options {
        margin-top: 6px;
        max-height: 260px;
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 4px;
        background: var(--bg-card);
      }
      .structure-options[hidden] { display: none; }
      .structure-option {
        display: block;
        min-height: 44px;
        padding: 10px;
        border: 0;
        border-radius: 5px;
        background: transparent;
        line-height: 1.45;
      }
      .structure-option:hover, .structure-option[aria-selected="true"] { background: var(--bg-soft); }
      .structure-trigger:focus-visible, .structure-option:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
      }
      .structure-custom { display: flex; gap: 8px; margin-top: 14px; }
      .structure-custom .form-input { flex: 1; min-width: 0; }
      .structure-custom .btn { flex: 0 0 auto; }
      .structure-help, .structure-selection { font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
      .structure-help { margin: 8px 0 0; }
      .structure-error { color: var(--danger); }
      .structure-selection { margin-top: 12px; overflow-wrap: anywhere; }
      .structure-selection strong { color: var(--text-primary); }
      .project-structure-readonly { display: grid; gap: 8px; overflow-wrap: anywhere; }
      .project-structure-readonly small { display: block; color: var(--text-secondary); }
      @media (max-width: 600px) {
        .project-structure-grid { grid-template-columns: minmax(0, 1fr); }
        .structure-options { max-height: 220px; }
      }

      .faza-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 6px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        cursor: pointer;
        transition: all 0.2s;
        font-size: 13px;
      }

      .faza-item:hover {
        border-color: var(--accent);
      }

      .faza-item.completed {
        background: var(--success-soft);
        border-color: var(--success);
      }

      .faza-checkbox {
        width: 16px;
        height: 16px;
        border-radius: 4px;
        border: 2px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 10px;
        transition: all 0.2s;
      }

      .faza-item.completed .faza-checkbox {
        background: var(--success);
        border-color: var(--success);
        color: white;
      }

      .client-inline-form {
        background: var(--bg-soft);
        border-radius: 8px;
        padding: 16px;
        margin-top: 8px;
        border: 1px dashed var(--border);
      }

      .client-inline-form.hidden {
        display: none;
      }

      .team-member-row {
        display: grid;
        grid-template-columns: 1.1fr 1fr auto;
        gap: 8px;
        align-items: center;
        margin-bottom: 10px;
      }

      .team-member-row select {
        width: 100%;
      }

      .team-member-row input {
        width: 100%;
      }

      .team-new-fields {
        display: none;
        grid-column: 1/-1;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 8px;
        background: var(--bg-soft);
        border: 1px dashed var(--border);
        border-radius: 8px;
        padding: 10px;
      }

      .team-new-fields.active {
        display: grid;
      }

      .team-new-hint {
        grid-column: 1/-1;
        font-size: 12px;
        color: var(--text-secondary);
        margin-bottom: 2px;
      }

      .team-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 10px;
      }

      .form-check-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
        font-size: 13px;
        color: var(--text-secondary);
      }

      .form-check-row input {
        width: 16px;
        height: 16px;
        accent-color: var(--accent);
      }

      .inline-check-field {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        align-items: center;
      }

      .form-check-row.compact {
        margin-top: 0;
        white-space: nowrap;
      }

      @media (max-width: 768px) {
        .team-member-row {
          grid-template-columns: 1fr auto;
        }
        .team-member-row .team-rol {
          grid-column: 1/-1;
        }
        .team-new-fields {
          grid-template-columns: 1fr;
        }
        .team-actions {
          grid-template-columns: 1fr;
        }
      }

      .add-btn {
        background: none;
        border: 1px dashed var(--border);
        color: var(--accent);
        padding: 8px 12px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        justify-content: center;
        transition: all 0.2s;
      }

      .add-btn:hover {
        border-color: var(--accent);
        background: var(--accent-light);
      }

      .remove-btn {
        background: none;
        border: none;
        color: var(--danger);
        cursor: pointer;
        font-size: 14px;
        padding: 4px;
      }

      .source-auto {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        margin-left: 6px;
        color: var(--text-secondary);
      }

      .sync-overview-card {
        margin-bottom: 24px;
      }

      .sync-overview-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
      }

      .sync-card {
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--bg-soft);
        padding: 14px;
        min-height: 136px;
      }

      .dark-mode .sync-card {
        background: var(--bg-card);
      }

      .sync-card h4 {
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .sync-card p {
        font-size: 12px;
        color: var(--text-secondary);
        line-height: 1.45;
        margin-bottom: 12px;
      }

      .sync-pill-row {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
      }

      .sync-pill {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        padding: 4px 8px;
        font-size: 11px;
        font-weight: 700;
      }

      .sync-pill.ok {
        background: var(--success-soft);
        color: #166534;
      }

      .sync-pill.warn {
        background: var(--warning-soft);
        color: #92400e;
      }

      @media (max-width: 1200px) {
        .sync-overview-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media (max-width: 768px) {
        .sync-overview-grid {
          grid-template-columns: 1fr;
        }
      }

      .toast-container {
        position: fixed;
        right: 20px;
        bottom: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        z-index: 300;
      }

      .toast {
        background: #111827;
        color: white;
        border-radius: 10px;
        padding: 12px 14px;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);
        font-size: 13px;
        max-width: 320px;
        line-height: 1.4;
      }

      .toast.success {
        background: #065f46;
      }

      .toast.warning {
        background: #92400e;
      }

      .toast.error {
        background: #991b1b;
      }

      .calendar-detail-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .calendar-detail-section {
        padding: 16px 24px;
        border-bottom: 1px solid var(--border);
      }

      .calendar-detail-section:last-child {
        border-bottom: none;
      }

      .calendar-detail-section h4 {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-secondary);
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .calendar-detail-empty {
        font-size: 14px;
        color: var(--text-secondary);
        padding: 8px 0;
      }

      .calendar-detail-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--bg-soft);
        margin-bottom: 8px;
      }

      .calendar-detail-swatch {
        width: 10px;
        height: 38px;
        border-radius: 999px;
        flex: 0 0 auto;
        margin-top: 2px;
      }

      .calendar-detail-main {
        flex: 1;
        min-width: 0;
      }

      .calendar-detail-title {
        font-size: 14px;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 4px;
      }

      .calendar-detail-meta {
        font-size: 12px;
        color: var(--text-secondary);
        line-height: 1.5;
      }

      .calendar-detail-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 8px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        margin-left: 6px;
        vertical-align: middle;
      }

      .calendar-detail-badge.start {
        background: #dcfce7;
        color: #166534;
      }

      .calendar-detail-badge.deadline {
        background: var(--danger-soft);
        color: #991b1b;
      }

      .calendar-detail-badge.active {
        background: var(--info-soft);
        color: #1e40af;
      }

      .calendar-detail-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 8px;
      }

      .calendar-detail-actions .task-checkbox {
        flex: 0 0 20px;
        padding: 0;
      }

      body.dark-mode .card,
      body.dark-mode .stat-card,
      body.dark-mode .task-filter-panel,
      body.dark-mode .calendar-legend,
      body.dark-mode .modal,
      body.dark-mode .calendar-day,
      body.dark-mode .year-month-card,
      body.dark-mode .task-card,
      body.dark-mode .doc-card,
      body.dark-mode .settings-section,
      body.dark-mode .sync-card {
        background: var(--bg-card);
        border-color: var(--border);
        color: var(--text-primary);
        box-shadow: var(--shadow);
      }

      body.dark-mode .top-header {
        background: transparent;
        border-bottom-color: rgba(46, 139, 122, 0.4);
        color: var(--text-primary);
        box-shadow: none;
      }

      body.dark-mode .top-header::after {
        background: transparent;
      }

      body.dark-mode .stat-card.stat-card-soft-gradient::before {
        background: radial-gradient(circle at 0 0, rgba(0, 212, 199, 0.18), transparent 44%);
      }

      body.dark-mode .card.card-soft-gradient::before {
        background: radial-gradient(circle at 0 0, rgba(0, 212, 199, 0.18), transparent 44%);
      }

      body.dark-mode .stat-card.stat-card-predate,
      body.dark-mode .stat-card.stat-card-income-accent {
        background:
          radial-gradient(circle at 88% 14%, rgba(255, 255, 255, 0.22), transparent 30%),
          linear-gradient(135deg, #00bfae 0%, #0877c9 48%, #f35f55 100%);
        border-color: rgba(0, 212, 199, 0.62);
        box-shadow: 0 20px 52px rgba(0, 191, 174, 0.18);
      }

      body.dark-mode .stat-card.stat-card-invoice-accent {
        background:
          radial-gradient(circle at 88% 14%, rgba(255, 255, 255, 0.2), transparent 30%),
          linear-gradient(135deg, #d88908 0%, #c95836 48%, #6631c7 100%);
        border-color: rgba(245, 158, 11, 0.66);
        box-shadow: 0 20px 52px rgba(217, 119, 6, 0.2);
      }

      body.dark-mode .stat-card.stat-card-predate .stat-label,
      body.dark-mode .stat-card.stat-card-income-accent .stat-label,
      body.dark-mode .stat-card.stat-card-invoice-accent .stat-label {
        color: rgba(255, 255, 255, 0.88);
      }

      body.dark-mode .stat-card.stat-card-predate .stat-value,
      body.dark-mode .stat-card.stat-card-income-accent .stat-value,
      body.dark-mode .stat-card.stat-card-invoice-accent .stat-value {
        color: #ffffff;
      }

      body.dark-mode .stat-card.stat-card-predate .stat-icon,
      body.dark-mode .stat-card.stat-card-income-accent .stat-icon,
      body.dark-mode .stat-card.stat-card-invoice-accent .stat-icon {
        background: rgba(255, 255, 255, 0.18);
        color: #ffffff;
      }

      body.dark-mode .main-content {
        background: transparent;
      }

      body.dark-mode .content-area {
        background: transparent;
      }

      body.dark-mode .card-header,
      body.dark-mode .modal-header,
      body.dark-mode .modal-footer,
      body.dark-mode .modal-section,
      body.dark-mode .calendar-detail-section,
      body.dark-mode .settings-item {
        border-color: var(--border);
      }

      body.dark-mode .modal-overlay {
        background: rgba(3, 10, 14, 0.76);
      }

      body.dark-mode .modal {
        scrollbar-color: #456069 #0b161d;
      }

      body.dark-mode .modal::-webkit-scrollbar-track {
        background: #0b161d;
      }

      body.dark-mode .modal::-webkit-scrollbar-thumb {
        background: #456069;
        border-color: var(--bg-card);
      }

      body.dark-mode .modal-close:hover,
      body.dark-mode .btn-outline:hover,
      body.dark-mode .sortable-th:hover {
        background: #162b33;
      }

      body.dark-mode .search-box input,
      body.dark-mode .form-input,
      body.dark-mode .form-select,
      body.dark-mode .form-textarea {
        background: #0b161d;
        color: var(--text-primary);
        border-color: var(--border-strong);
      }

      body.dark-mode .search-box input::placeholder,
      body.dark-mode .form-input::placeholder,
      body.dark-mode .form-textarea::placeholder {
        color: var(--text-muted);
      }

      body.dark-mode .form-select option {
        background: #0b161d;
        color: var(--text-primary);
      }

      body.dark-mode .data-table th {
        background: #14242d;
        color: #b9d7d3;
        border-bottom-color: var(--border-strong);
      }

      body.dark-mode .data-table td {
        color: var(--text-primary);
        border-bottom-color: var(--border);
      }

      body.dark-mode .data-table tr:hover td {
        background: #142a31;
      }

      body.dark-mode .btn-outline {
        background: #0b161d;
        border-color: var(--border-strong);
        color: #d7e3e1;
      }

      body.dark-mode .btn-outline.active {
        background: rgba(46, 139, 122, 0.18);
        border-color: #2e8b7a;
        color: #bfe7df;
      }

      body.dark-mode .progress-bar,
      body.dark-mode .task-sync-state,
      body.dark-mode .deadline-countdown,
      body.dark-mode .tabs,
      body.dark-mode .calendar-view-switch {
        background: #0b161d;
        border-color: var(--border-strong);
        color: #c8d6d4;
      }

      body.dark-mode .tab.active,
      body.dark-mode .calendar-view-btn.active {
        background: #123c40;
        color: #cfe9e5;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
      }

      body.dark-mode .calendar-view-btn,
      body.dark-mode .tab {
        color: #c8d6d4;
      }

      body.dark-mode .calendar-day-header,
      body.dark-mode .year-mini-days,
      body.dark-mode .year-empty,
      body.dark-mode .calendar-events,
      body.dark-mode .task-filter-summary,
      body.dark-mode .task-filter-label,
      body.dark-mode .project-color-note,
      body.dark-mode .calendar-detail-empty,
      body.dark-mode .calendar-detail-meta,
      body.dark-mode .project-client,
      body.dark-mode .project-stage-phase,
      body.dark-mode .deadline-meta,
      body.dark-mode .doc-meta,
      body.dark-mode .global-search-meta {
        color: var(--text-secondary);
      }

      body.dark-mode .calendar-day.other-month {
        background: #0b161d;
        color: var(--text-muted);
      }

      body.dark-mode .calendar-day.weekend:not(.today),
      body.dark-mode .calendar-day.other-month.weekend,
      body.dark-mode .year-mini-day.weekend:not(.today) {
        background: var(--weekend-bg);
      }

      body.dark-mode .calendar-day.today,
      body.dark-mode .year-mini-day.today {
        background: #123c40;
        border-color: #2e8b7a;
        color: #d8e9e6;
        box-shadow: inset 0 0 0 1px rgba(46, 139, 122, 0.42);
      }

      body.dark-mode .calendar-day:hover,
      body.dark-mode .year-mini-day:hover {
        border-color: #2e8b7a;
      }

      body.dark-mode .year-mini-day {
        background: var(--bg-card);
        color: #c8d6d4;
      }

      body.dark-mode .year-mini-day.blank {
        background: transparent;
      }

      body.dark-mode .year-event,
      body.dark-mode .calendar-legend-item,
      body.dark-mode .calendar-detail-item,
      body.dark-mode .project-readonly-field,
      body.dark-mode .faze-section,
      body.dark-mode .client-inline-form,
      body.dark-mode .team-new-fields {
        background: var(--bg-soft);
        border-color: var(--border-strong);
        color: var(--text-primary);
      }

      body.dark-mode .year-event span {
        color: var(--text-secondary);
      }

      body.dark-mode .year-event.period {
        background: rgba(201, 90, 74, 0.16);
        border-left-color: #c95a4a;
      }

      body.dark-mode .year-event.start,
      body.dark-mode .year-event.task {
        background: rgba(46, 139, 122, 0.2);
        border-left-color: #2e8b7a;
      }

      body.dark-mode .year-event.deadline {
        background: rgba(239, 68, 68, 0.14);
        border-left-color: #ef4444;
      }

      body.dark-mode .year-event.manual {
        background: rgba(250, 204, 21, 0.1);
        border-left-color: #facc15;
        box-shadow:
          inset 0 0 0 1px rgba(250, 204, 21, 0.26),
          0 0 12px rgba(250, 204, 21, 0.08);
      }

      body.dark-mode .year-event.aviz {
        background: rgba(139, 92, 246, 0.16);
        border-left-color: #8b5cf6;
      }

      body.dark-mode .year-event.studiu {
        background: rgba(46, 139, 122, 0.18);
        border-left-color: #4db6a6;
      }

      body.dark-mode .project-readonly-phase,
      body.dark-mode .faza-item {
        background: #0b161d;
        border-color: var(--border-strong);
        color: #c8d6d4;
      }

      body.dark-mode .project-readonly-phase.completed,
      body.dark-mode .faza-item.completed,
      body.dark-mode .task-sync-state.done {
        background: rgba(46, 139, 122, 0.2);
        border-color: #2e8b7a;
        color: #ccece5;
      }

      body.dark-mode .project-color-input {
        background: #0b161d;
        border-color: var(--border-strong);
      }

      body.dark-mode .project-color-preset,
      body.dark-mode .project-readonly-color-swatch {
        border-color: #0b161d;
        box-shadow: 0 0 0 1px var(--border-strong);
      }

      body.dark-mode .responsabili-chip-list {
        background: #0b161d;
        border-color: var(--border-strong);
      }

      body.dark-mode .responsabil-chip {
        background: rgba(46, 139, 122, 0.22);
        color: #cfe9e5;
      }

      body.dark-mode .project-list-button {
        background: #0b161d;
        border-color: var(--border-strong);
        color: #cfe9e5;
      }

      body.dark-mode .project-list-button:hover {
        background: #123c40;
        border-color: #2e8b7a;
      }

      body.dark-mode .linked-project-item {
        background: #0b161d;
        border-color: var(--border-strong);
      }

      body.dark-mode .year-mini-marker {
        box-shadow: 0 0 0 1px var(--bg-card);
      }

      body.dark-mode .calendar-reminder-badge {
        border-color: rgba(250, 204, 21, 0.32);
        background: rgba(250, 204, 21, 0.12);
        color: #fde68a;
      }

      body.dark-mode .calendar-detail-badge.start {
        background: rgba(46, 139, 122, 0.2);
        color: #cfe9e5;
      }

      body.dark-mode .calendar-detail-badge.deadline {
        background: rgba(201, 90, 74, 0.2);
        color: #f6c0b8;
      }

      body.dark-mode .calendar-detail-badge.active {
        background: rgba(29, 111, 106, 0.24);
        color: #bfe7df;
      }

      body.dark-mode .calendar-task-label,
      body.dark-mode .task-priority.low {
        background: rgba(22, 163, 74, 0.18);
        color: #bbf7d0;
      }

      body.dark-mode .task-priority.medium {
        background: rgba(245, 158, 11, 0.18);
        color: #fde68a;
      }

      body.dark-mode .task-priority.high {
        background: rgba(239, 68, 68, 0.18);
        color: #fecaca;
      }

      body.dark-mode .task-overdue {
        background: rgba(239, 68, 68, 0.18);
        color: #fecaca;
      }

      body.dark-mode .stat-icon.blue {
        background: rgba(29, 111, 106, 0.24);
        color: #bfe7df;
      }

      body.dark-mode .stat-icon.orange {
        background: rgba(201, 90, 74, 0.18);
        color: #f6c0b8;
      }

      body.dark-mode .stat-icon.green {
        background: rgba(46, 139, 122, 0.18);
        color: #cfe9e5;
      }

      body.dark-mode .stat-icon.red {
        background: rgba(201, 90, 74, 0.18);
        color: #f6c0b8;
      }

      body.dark-mode .stat-icon.purple {
        background: rgba(139, 92, 246, 0.16);
        color: #ddd6fe;
      }

      body.dark-mode .global-search-results {
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
      }

      /* 05. STARI RESPONSIVE SI DARK MODE --------------------------------------- */
      /* Responsive interface layer */
      html {
        max-width: 100%;
        overflow-x: auto;
      }

      .main-content,
      .content-area,
      .card,
      .card-body,
      .toolbar,
      .data-table {
        min-width: 0;
      }

      .sidebar-overlay {
        display: none;
      }

      @media (min-width: 769px) {
        .main-content {
          min-width: 900px;
        }
      }

      @media (max-width: 1024px) {
        .content-area {
          padding: 20px;
        }
        .top-header {
          padding: 18px 22px;
        }
        .stats-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .dashboard-grid {
          grid-template-columns: 1fr;
        }
        .year-calendar-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .calendar-legend-items {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .calendar-legend-item {
          min-width: 0;
        }
        .finance-filter-panel,
        .finance-filter-panel.active {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .finance-filter-panel .task-filter-actions {
          grid-column: auto;
          justify-self: end;
        }
      }

      @media (max-width: 768px) {
        body.sidebar-lock {
          overflow: hidden;
        }
        .app-container {
          display: block;
          min-width: 0;
        }
        .sidebar {
          width: min(84vw, 320px);
          max-width: 320px;
          transform: translateX(-105%);
          z-index: 180;
          box-shadow: 22px 0 50px rgba(0, 0, 0, 0.28);
        }
        .sidebar.open {
          transform: translateX(0);
        }
        body.sidebar-collapsed .sidebar {
          width: min(84vw, 320px);
          max-width: 320px;
        }
        body.sidebar-collapsed .logo-block {
          display: flex;
        }
        body.sidebar-collapsed .sidebar-header {
          justify-content: flex-start;
          padding: 12px 14px;
        }
        body.sidebar-collapsed .sidebar-nav {
          padding: 12px;
        }
        body.sidebar-collapsed .nav-item {
          justify-content: flex-start;
          gap: 12px;
          padding: 11px 14px;
        }
        body.sidebar-collapsed .nav-item span {
          display: inline;
        }
        body.sidebar-collapsed .sidebar-footer {
          flex-direction: row;
          padding: 16px 12px;
        }
        body.sidebar-collapsed .sidebar-footer .nav-item {
          width: auto;
          flex: 1;
        }
        .sidebar-collapse-btn {
          display: none;
        }
        .sidebar-overlay {
          display: block;
          position: fixed;
          inset: 0;
          background: rgba(3, 10, 14, 0.52);
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.2s ease;
          z-index: 160;
          backdrop-filter: blur(2px);
        }
        .sidebar-overlay.active {
          opacity: 1;
          pointer-events: auto;
        }
        .sidebar-header {
          height: 72px;
          padding: 12px 14px;
        }
        .logo-icon {
          width: 36px;
          height: 36px;
          border-radius: 10px;
        }
        .logo-icon svg {
          width: 28px;
          height: 28px;
        }
        .logo-text {
          font-size: 16px;
        }
        .logo-tagline {
          font-size: 9px;
        }
        .sidebar-nav {
          padding: 12px;
        }
        .nav-item {
          min-height: 44px;
          padding: 11px 14px;
          font-size: 14px;
        }
        .main-content {
          margin-left: 0;
          width: 100%;
          min-height: 100vh;
        }
        body.sidebar-collapsed .main-content {
          margin-left: 0;
        }
        .top-header {
          position: sticky;
          top: 0;
          z-index: 120;
          padding: 12px 16px;
          display: grid;
          grid-template-columns: minmax(0, 1fr) auto;
          gap: 10px;
          align-items: center;
        }
        .top-header > div:first-child {
          min-width: 0;
          display: flex !important;
          align-items: center;
          gap: 12px !important;
        }
        .mobile-menu-btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 44px;
          height: 44px;
          border-radius: 10px;
          border: 1px solid var(--border);
          background: var(--bg-card);
        }
        .header-title {
          min-width: 0;
        }
        .header-title h1 {
          font-size: 22px;
          line-height: 1.15;
          margin-bottom: 2px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .header-title p {
          font-size: 13px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .header-actions {
          gap: 8px;
          justify-content: flex-end;
          min-width: 0;
        }
        .global-search-box {
          min-width: 0;
        }
        .global-search-box input {
          width: min(36vw, 220px);
          min-width: 116px;
        }
        .global-search-results {
          right: 0;
          width: min(92vw, 420px);
        }
        .user-avatar {
          width: 44px;
          height: 44px;
          flex: 0 0 auto;
        }
        .content-area {
          padding: 16px;
          max-width: 100vw;
          overflow-x: hidden;
        }
        .toolbar {
          align-items: stretch;
          gap: 10px;
          margin-bottom: 14px;
        }
        .toolbar-actions {
          gap: 8px;
        }
        .search-box input {
          width: 100%;
          min-height: 44px;
          font-size: 14px;
        }
        .page-section > .toolbar .search-box {
          width: 100%;
          max-width: 360px;
        }
        .btn,
        .btn-sm,
        .calendar-view-btn,
        .modal-close,
        .project-list-button,
        .task-checkbox,
        .task-sync-state,
        .remove-btn,
        .add-btn {
          min-width: 44px;
          min-height: 44px;
        }
        .btn {
          justify-content: center;
          padding: 10px 14px;
        }
        .btn-sm {
          padding: 8px 10px;
          font-size: 13px;
        }
        .stats-grid {
          grid-template-columns: 1fr;
          gap: 12px;
          margin-bottom: 16px;
        }
        .stat-card {
          padding: 16px;
        }
        .stat-value {
          font-size: 24px;
        }
        .stat-value.currency {
          font-size: 21px;
        }
        .dashboard-grid {
          grid-template-columns: 1fr;
          gap: 16px;
        }
        .card-header {
          padding: 16px;
        }
        .card-body {
          padding: 16px;
        }
        .project-item,
        .deadline-item {
          padding: 12px 0;
          gap: 10px;
        }
        .deadline-countdown {
          min-width: auto;
          font-size: 12px;
        }
        .task-filter-panel,
        .finance-filter-panel,
        .finance-filter-panel.active {
          grid-template-columns: 1fr !important;
          padding: 14px;
          gap: 12px;
          margin-bottom: 14px;
        }
        .task-filter-actions,
        .finance-filter-panel .task-filter-actions {
          grid-column: auto;
          justify-self: stretch;
          justify-content: stretch;
        }
        .task-filter-actions .btn {
          flex: 1;
        }
        .finance-transaction-toolbar {
          align-items: stretch;
        }
        .finance-transaction-toolbar .search-box {
          max-width: none;
          width: 100%;
        }
        .finance-transaction-toolbar .toolbar-actions {
          width: 100%;
          justify-content: flex-end;
        }
        .doc-grid {
          grid-template-columns: 1fr;
        }
        .notes-grid {
          grid-template-columns: 1fr;
        }
        .chart-container {
          height: 240px;
          overflow: hidden;
        }
        .bar-chart {
          gap: 8px;
          padding: 14px 0;
          min-width: 0;
        }
        .monthly-finance-bars {
          height: 180px;
        }
        .monthly-finance-bar {
          width: 13px;
        }
        #proiecte .data-table,
        #arhiva .data-table,
        #clienti .data-table,
        #colaboratori .data-table,
        #echipa .data-table,
        #evenimentePage .data-table,
        #financiar .data-table,
        #avize .data-table {
          display: block;
          width: 100%;
          border-collapse: separate;
        }
        #proiecte .data-table thead,
        #arhiva .data-table thead,
        #clienti .data-table thead,
        #colaboratori .data-table thead,
        #echipa .data-table thead,
        #evenimentePage .data-table thead,
        #financiar .data-table thead,
        #avize .data-table thead {
          display: none;
        }
        #proiecte .data-table tbody,
        #arhiva .data-table tbody,
        #clienti .data-table tbody,
        #colaboratori .data-table tbody,
        #echipa .data-table tbody,
        #evenimentePage .data-table tbody,
        #financiar .data-table tbody,
        #avize .data-table tbody {
          display: block;
        }
        #proiecte .data-table tr,
        #arhiva .data-table tr,
        #clienti .data-table tr,
        #colaboratori .data-table tr,
        #echipa .data-table tr,
        #evenimentePage .data-table tr,
        #financiar .data-table tr,
        #avize .data-table tr {
          display: block;
          margin: 0 0 12px;
          padding: 14px;
          border: 1px solid var(--border);
          border-radius: 12px;
          background: var(--bg-card);
          box-shadow: var(--shadow);
        }
        #proiecte .data-table tr:hover td,
        #arhiva .data-table tr:hover td,
        #clienti .data-table tr:hover td,
        #colaboratori .data-table tr:hover td,
        #echipa .data-table tr:hover td,
        #evenimentePage .data-table tr:hover td,
        #financiar .data-table tr:hover td,
        #avize .data-table tr:hover td {
          background: transparent;
        }
        #proiecte .data-table td,
        #arhiva .data-table td,
        #clienti .data-table td,
        #colaboratori .data-table td,
        #echipa .data-table td,
        #evenimentePage .data-table td,
        #financiar .data-table td,
        #avize .data-table td {
          display: grid;
          grid-template-columns: minmax(108px, 38%) minmax(0, 1fr);
          gap: 10px;
          align-items: center;
          padding: 9px 0;
          border-bottom: 1px solid var(--border);
          font-size: 14px;
          word-break: break-word;
        }
        #proiecte .data-table td:last-child,
        #arhiva .data-table td:last-child,
        #clienti .data-table td:last-child,
        #colaboratori .data-table td:last-child,
        #echipa .data-table td:last-child,
        #evenimentePage .data-table td:last-child,
        #financiar .data-table td:last-child,
        #avize .data-table td:last-child {
          border-bottom: 0;
        }
        #proiecte .data-table td::before,
        #arhiva .data-table td::before,
        #clienti .data-table td::before,
        #colaboratori .data-table td::before,
        #echipa .data-table td::before,
        #evenimentePage .data-table td::before,
        #financiar .data-table td::before,
        #avize .data-table td::before {
          font-size: 11px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.04em;
          color: var(--text-secondary);
        }
        #tabelProiecte td:nth-child(1)::before {
          content: "Nr. proiect";
        }
        #tabelProiecte td:nth-child(2)::before {
          content: "Proiect";
        }
        #tabelProiecte td:nth-child(3)::before {
          content: "Client";
        }
        #tabelProiecte td:nth-child(4)::before {
          content: "Stadiul proiectului";
        }
        #tabelProiecte td:nth-child(5)::before {
          content: "Faza proiect";
        }
        #tabelProiecte td:nth-child(6)::before {
          content: "Status";
        }
        #tabelProiecte td:nth-child(7)::before {
          content: "Progres";
        }
        #tabelProiecte td:nth-child(8)::before {
          content: "Valoare";
        }
        #tabelProiecte td:nth-child(9)::before {
          content: "Data predare";
        }
        #tabelProiecte td:nth-child(10)::before {
          content: "Actiuni";
        }
        #tabelArhiva td:nth-child(1)::before {
          content: "Proiect";
        }
        #tabelArhiva td:nth-child(2)::before {
          content: "Client";
        }
        #tabelArhiva td:nth-child(3)::before {
          content: "Stadiul proiectului";
        }
        #tabelArhiva td:nth-child(4)::before {
          content: "Faza proiect";
        }
        #tabelArhiva td:nth-child(5)::before {
          content: "Status";
        }
        #tabelArhiva td:nth-child(6)::before {
          content: "Data predare";
        }
        #tabelArhiva td:nth-child(7)::before {
          content: "Data arhivare";
        }
        #tabelArhiva td:nth-child(8)::before {
          content: "Actiuni";
        }
        #tabelClienti td:nth-child(1)::before {
          content: "Nume";
        }
        #tabelClienti td:nth-child(2)::before {
          content: "Adresa";
        }
        #tabelClienti td:nth-child(3)::before {
          content: "Proiecte";
        }
        #tabelClienti td:nth-child(4)::before {
          content: "Actiuni";
        }
        #tabelColaboratori td:nth-child(1)::before {
          content: "Nume";
        }
        #tabelColaboratori td:nth-child(2)::before {
          content: "Specializare";
        }
        #tabelColaboratori td:nth-child(3)::before {
          content: "Proiecte";
        }
        #tabelColaboratori td:nth-child(4)::before {
          content: "Actiuni";
        }
        #tabelEchipa td:nth-child(1)::before { content: "Nume"; }
        #tabelEchipa td:nth-child(2)::before { content: "Specializare"; }
        #tabelEchipa td:nth-child(3)::before { content: "Email"; }
        #tabelEchipa td:nth-child(4)::before { content: "Telefon"; }
        #tabelEchipa td:nth-child(5)::before { content: "Proiecte"; }
        #tabelEchipa td:nth-child(6)::before { content: "Actiuni"; }
        #tabelEvenimente td:nth-child(1)::before {
          content: "Perioadă";
        }
        #tabelEvenimente td:nth-child(2)::before {
          content: "Eveniment";
        }
        #tabelEvenimente td:nth-child(3)::before {
          content: "Tip";
        }
        #tabelEvenimente td:nth-child(4)::before {
          content: "Proiect";
        }
        #tabelEvenimente td:nth-child(5)::before {
          content: "Responsabil";
        }
        #tabelEvenimente td:nth-child(6)::before {
          content: "Stare";
        }
        #tabelEvenimente td:nth-child(7)::before {
          content: "Actiuni";
        }
        #tabelTranzactii td:nth-child(1)::before {
          content: "Proiect";
        }
        #tabelTranzactii td:nth-child(2)::before {
          content: "Client";
        }
        #tabelTranzactii td:nth-child(3)::before {
          content: "Faza";
        }
        #tabelTranzactii td:nth-child(4)::before {
          content: "Valoare contract";
        }
        #tabelTranzactii td:nth-child(5)::before {
          content: "Tip tranzactie";
        }
        #tabelTranzactii td:nth-child(6)::before {
          content: "Suma";
        }
        #tabelTranzactii td:nth-child(7)::before {
          content: "Data";
        }
        #tabelTranzactii td:nth-child(8)::before {
          content: "Descriere";
        }
        #tabelTranzactii td:nth-child(9)::before {
          content: "Actiuni";
        }
        #tabelAvize td:nth-child(1)::before {
          content: "Institutie";
        }
        #tabelAvize td:nth-child(2)::before {
          content: "Tip aviz";
        }
        #tabelAvize td:nth-child(3)::before {
          content: "Proiect";
        }
        #tabelAvize td:nth-child(4)::before {
          content: "Nr. si data inregistrare";
        }
        #tabelAvize td:nth-child(5)::before {
          content: "Status";
        }
        #tabelAvize td:nth-child(6)::before {
          content: "Data depunere";
        }
        #tabelAvize td:nth-child(7)::before {
          content: "Zile de la depunere";
        }
        #tabelAvize td:nth-child(8)::before {
          content: "Actiuni";
        }
        .data-table td:last-child {
          align-items: center;
        }
        .data-table td:last-child > button,
        .data-table td:last-child .btn {
          margin-right: 4px;
        }
        .project-progress-inline {
          min-width: 0;
          flex-wrap: wrap;
        }
        .project-progress-range {
          width: min(100%, 160px);
        }
        .project-status-select,
        .aviz-status-select {
          min-height: 44px;
          max-width: 100%;
          font-size: 13px;
        }
        .modal-overlay {
          align-items: flex-start;
          justify-content: center;
          padding: 5vh 0;
        }
        .modal {
          width: 95vw;
          max-width: none;
          max-height: 90vh;
          border-radius: 14px;
          display: flex;
          flex-direction: column;
          overflow: hidden;
        }
        .modal-header {
          padding: 14px 16px;
          flex: 0 0 auto;
        }
        .modal-title {
          font-size: 18px;
        }
        .modal-body {
          overflow-y: auto;
          flex: 1;
          -webkit-overflow-scrolling: touch;
        }
        .modal-footer {
          position: sticky;
          bottom: 0;
          background: var(--bg-card);
          padding: 12px 16px;
          flex: 0 0 auto;
          gap: 10px;
        }
        .modal-footer .btn {
          flex: 1;
          min-height: 46px;
        }
        .modal-section {
          padding: 16px;
        }
        .calendar-detail-section {
          padding: 14px 16px;
        }
        .form-row,
        .form-row-3,
        .progress-manual-control,
        .team-member-row,
        .team-new-fields,
        .team-actions,
        .responsabili-add-row,
        .project-readonly-grid,
        .project-readonly-phases,
        .faze-grid,
        .inline-check-field {
          grid-template-columns: 1fr !important;
        }
        .team-member-row .team-rol {
          grid-column: auto;
        }
        .form-input,
        .form-select,
        .form-textarea {
          min-height: 44px;
          font-size: 14px;
        }
        .form-check-row.compact {
          white-space: normal;
        }
        .calendar-view-switch {
          flex-wrap: wrap;
        }
        .calendar-view-btn {
          font-size: 13px;
          padding: 8px 11px;
        }
        .calendar-grid.compact-month .calendar-day {
          min-height: 82px;
          padding: 7px;
          font-size: 13px;
        }
        .calendar-grid.compact-month .calendar-events {
          font-size: 11px;
        }
        .year-calendar-grid {
          grid-template-columns: 1fr !important;
          gap: 12px;
        }
        .year-month-card {
          min-height: auto;
          padding: 12px;
        }
        .year-mini-day {
          min-height: 28px;
        }
        .calendar-legend {
          padding: 12px;
        }
        .calendar-legend-items {
          grid-template-columns: 1fr;
        }
        .calendar-legend-header {
          align-items: flex-start;
          font-size: 12px;
        }
      }

      @media (max-width: 480px) {
        .top-header {
          grid-template-columns: 1fr;
          align-items: stretch;
        }
        .header-actions {
          width: 100%;
          justify-content: space-between;
        }
        .global-search-box {
          flex: 1;
        }
        .global-search-box input {
          width: 100%;
          min-width: 0;
        }
        .header-title h1 {
          font-size: 21px;
        }
        .header-title p {
          font-size: 12px;
        }
        .content-area {
          padding: 12px;
        }
        .toolbar {
          flex-direction: column;
          align-items: stretch;
        }
        .toolbar > div {
          width: 100%;
        }
        .toolbar-actions {
          width: 100%;
          justify-content: stretch;
        }
        .toolbar-actions .btn,
        .toolbar .btn-primary {
          width: 100%;
        }
        .calendar-view-switch {
          width: 100%;
          justify-content: stretch;
        }
        .calendar-view-btn {
          flex: 1;
        }
        .stat-card,
        .card-body,
        .card-header {
          padding: 14px;
        }
        .project-readonly-field {
          padding: 10px 12px;
        }
        #proiecte .data-table td,
        #clienti .data-table td,
        #colaboratori .data-table td,
        #echipa .data-table td,
        #evenimentePage .data-table td,
        #financiar .data-table td,
        #avize .data-table td {
          grid-template-columns: 1fr;
          gap: 4px;
          font-size: 14px;
        }
        .task-card {
          align-items: flex-start;
          padding: 14px;
          gap: 10px;
        }
        .task-content {
          min-width: 0;
        }
        .task-title {
          font-size: 14px;
        }
        .task-meta {
          font-size: 12px;
        }
        .task-priority,
        .task-overdue {
          font-size: 12px;
          padding: 4px 8px;
        }
        .settings-item {
          align-items: flex-start;
          gap: 12px;
          flex-direction: column;
        }
        .settings-actions {
          width: 100%;
          justify-content: stretch;
        }
        .settings-actions .btn {
          flex: 1;
        }
        .modal-overlay {
          padding: 3vh 0;
        }
        .modal {
          width: 95vw;
          max-height: 92vh;
        }
        .modal-footer {
          flex-direction: column-reverse;
        }
        .modal-footer .btn {
          width: 100%;
        }
        .calendar-grid.compact-month {
          display: flex;
          flex-direction: column;
          gap: 8px;
        }
        .calendar-grid.compact-month .calendar-day-header {
          display: none;
        }
        .calendar-grid.compact-month .calendar-day {
          width: 100%;
          min-height: 64px;
          border: 1px solid var(--border) !important;
          border-radius: 10px !important;
          padding: 10px 12px;
          background: var(--bg-card);
        }
        .calendar-grid.compact-month
          .calendar-day.other-month:not(.has-event):not(.in-project):not(.has-task):not(.today) {
          display: none;
        }
        .calendar-grid.compact-month .calendar-day:not(.has-event):not(.in-project):not(.has-task):not(.today) {
          min-height: 48px;
        }
        .calendar-grid.compact-month .calendar-project-bars {
          left: 10px;
          right: 10px;
        }
        .calendar-grid.compact-month .calendar-flow-bar {
          left: 10px !important;
          right: 10px !important;
          border-radius: 999px !important;
        }
        .calendar-events {
          font-size: 12px;
        }
        .year-mini-days {
          font-size: 10px;
        }
        .year-mini-day {
          height: 30px;
          padding: 3px 2px 9px;
        }
        .calendar-legend-item {
          flex: 1 1 100%;
          padding: 10px;
        }
        .calendar-legend-name {
          font-size: 13px;
        }
        .calendar-legend-meta {
          font-size: 12px;
        }
        .monthly-finance-values {
          font-size: 9px;
        }
        .finance-chart-line {
          stroke-width: 1.35;
        }
        .finance-chart-axis-label {
          font-size: 12px;
        }
      }

      body.dark-mode .sidebar-overlay {
        background: rgba(0, 8, 10, 0.66);
      }

      body.dark-mode .sidebar {
        background: linear-gradient(
          160deg,
          rgba(2, 20, 22, 0.86) 0%,
          rgba(3, 40, 44, 0.78) 52%,
          rgba(7, 67, 63, 0.72) 100%
        );
        box-shadow:
          inset -1px 0 0 rgba(221, 237, 227, 0.08),
          14px 0 36px rgba(0, 0, 0, 0.24);
        -webkit-backdrop-filter: blur(22px) saturate(112%);
        backdrop-filter: blur(22px) saturate(112%);
      }

      body.dark-mode .nav-item.active {
        background: rgba(221, 237, 227, 0.13);
        box-shadow:
          inset 0 0 0 1px rgba(221, 237, 227, 0.24),
          0 0 0 1px rgba(221, 237, 227, 0.06),
          0 8px 18px rgba(0, 0, 0, 0.18);
      }

      body.dark-mode .mobile-menu-btn {
        background: var(--bg-card);
        border-color: var(--border-strong);
        color: var(--text-primary);
      }

      body.dark-mode .modal-footer {
        background: var(--bg-card);
      }

      .auth-gate {
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: linear-gradient(135deg, rgba(3, 23, 24, 0.88), rgba(3, 58, 55, 0.78));
        backdrop-filter: blur(12px);
        z-index: 500;
      }

      .auth-gate.active {
        display: flex;
      }

      .auth-card {
        width: min(460px, 100%);
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 14px;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
        overflow: hidden;
      }

      .auth-card-header {
        padding: 22px 24px;
        border-bottom: 1px solid var(--border);
      }

      .auth-card-title {
        font-size: 22px;
        font-weight: 800;
        color: var(--text-primary);
      }

      .auth-card-subtitle {
        margin-top: 6px;
        color: var(--text-secondary);
        font-size: 14px;
      }

      .auth-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: var(--bg-main);
        padding: 6px;
        gap: 6px;
        margin: 18px 24px 0;
        border-radius: 10px;
      }

      .auth-tab {
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--text-secondary);
        font-weight: 700;
        padding: 10px;
        cursor: pointer;
      }

      .auth-tab.active {
        background: var(--bg-card);
        color: var(--accent-primary);
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
      }

      .auth-form {
        display: grid;
        gap: 12px;
        padding: 18px 24px 24px;
      }

      .auth-text-button {
        justify-self: center;
        border: 0;
        background: transparent;
        color: var(--accent-primary);
        cursor: pointer;
        font: inherit;
        padding: 4px 8px;
        text-decoration: underline;
      }

      .auth-text-button:focus-visible {
        outline: 2px solid var(--accent-primary);
        outline-offset: 2px;
        border-radius: 4px;
      }

      .auth-message {
        display: none;
        padding: 10px 12px;
        border-radius: 8px;
        font-size: 13px;
      }

      .auth-message.error {
        display: block;
        background: rgba(201, 90, 74, 0.16);
        color: var(--danger);
      }

      .auth-message.success {
        display: block;
        background: rgba(46, 139, 122, 0.16);
        color: var(--success);
      }

      body.auth-locked {
        overflow: hidden;
      }

      body.dark-mode .auth-gate {
        background: linear-gradient(135deg, rgba(0, 12, 14, 0.9), rgba(0, 62, 58, 0.74));
      }

      body.dark-mode .auth-tab.active {
        background: var(--bg-soft);
      }

      @media (max-width: 480px) {
        .auth-card-header {
          padding: 18px;
        }
        .auth-tabs {
          margin: 14px 18px 0;
        }
        .auth-form {
          padding: 16px 18px 18px;
        }
      }