/* ========================================
   Client Styles - TaskManager Pro
   ======================================== */
   /* Hide Next.js dev indicator / loading icon on client pages */
   #devtools-indicator,
   [id="devtools-indicator"],
   .nextjs-devtools-indicator,
   .nextjs-devtools-indicator *,
   [class*="next-logo"],
   [class*="devtools-indicator"],
   [data-nextjs-dialog-overlay] + [class*="indicator"] {
     display: none !important;
   }
   html { font-size: 16px; }
   
/* Default SVG rendering for Feather/Lucide icon set */
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ========================================
   Page: client.html
   Variables scoped to .client-portal-layout so admin/manager pages are unaffected
   ======================================== */

    .client-portal-layout {
      --color-primary: #005983;
      --color-primary-50: #e0f4f8;
      --color-primary-300: #66c9e0;
      --color-primary-400: #33b5d4;
      --color-primary-500: #0077a3;
      --color-primary-600: #005983;
      --color-primary-700: #004d6d;
      --color-white: #FFFFFF;
      --color-error: #EF4444;
      --color-success-500: #10B981;
      --color-gray-50: #F9FAFB;
      --color-gray-100: #F3F4F6;
      --color-gray-200: #E5E7EB;
      --color-gray-300: #D1D5DB;
      --color-gray-400: #9CA3AF;
      --color-gray-500: #6B7280;
      --color-gray-600: #4B5563;
      --color-gray-700: #374151;
      --color-gray-800: #1F2937;
      --color-gray-900: #111827;
      --font-size-xs: 0.75rem;
      --font-size-sm: 0.875rem;
      --font-size-base: 1rem;
      --font-size-xl: 1.25rem;
      --font-size-2xl: 1.5rem;
      --spacing-1: 4px;
      --spacing-2: 8px;
      --spacing-3: 12px;
      --spacing-4: 16px;
      --spacing-5: 20px;
      --spacing-6: 24px;
      --spacing-8: 32px;
      --radius-md: 6px;
      --radius-lg: 12px;
      --radius-full: 9999px;
      --radius-sm: 4px;
      --radius-xl: 16px;
      --transition-fast: 150ms ease;
      --transition-base: 200ms ease;
      --transition-slow: 300ms ease;
      --spacing-10: 40px;
      --font-size-lg: 1.125rem;
      --font-family: 'Inter', system-ui, sans-serif;

      /* Color tokens */
      --color-success: #10B981;
      --color-success-light: #D1FAE5;
      --color-success-dark: #059669;
      --color-info: #3B82F6;
      --color-info-light: #DBEAFE;
      --color-info-dark: #2563EB;
      --color-warning: #F59E0B;
      --color-warning-light: #FEF3C7;

      /* Shadows */
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
      --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
      --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);

      /* Aliases from main.css */
      --color-primary-light: #e0f4f8;
      --color-primary-100: #b3e5f0;
      --color-primary-hover: #004d6d;
    }

    /* ========================================
       Client Portal Layout
       ======================================== */
    body:has(.client-portal-layout) {
      background-color: #f8f9fb;
    }

    /* --- Client Header --- */
    .client-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 var(--spacing-8);
      height: 68px;
      background: var(--color-white);
      border-bottom: 1px solid var(--color-gray-200);
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .client-header-left {
      display: flex;
      align-items: center;
      gap: var(--spacing-3);
    }
    .client-logo-link {
      display: flex;
      align-items: center;
      text-decoration: none;
      color: inherit;
    }
    .client-app-logo {
      width: 150px;
      height: 57px;
      object-fit: contain;
    }

    .client-logo {
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, #6366f1, #4f46e5);
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff !important;
      font-weight: 700;
      font-size: var(--font-size-sm);
      letter-spacing: 0.5px;
      flex-shrink: 0;
    }

    .client-company-name {
      font-size: var(--font-size-lg);
      font-weight: 600;
      color: var(--color-gray-900);
    }

    .client-header-center {
      font-size: var(--font-size-sm);
      font-weight: 500;
      color: var(--color-gray-500);
      text-transform: uppercase;
      letter-spacing: 1.5px;
    }

    .client-header-right {
      display: flex;
      align-items: center;
      gap: var(--spacing-4);
    }

    .notification-btn {
      position: relative;
      background: none;
      border: none;
      cursor: pointer;
      padding: var(--spacing-2);
      color: var(--color-gray-500);
      border-radius: var(--radius-md);
      transition: all var(--transition-fast);
    }

    .notification-btn:hover {
      background: var(--color-gray-100);
      color: var(--color-gray-700);
    }

    .notification-btn svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .notification-badge {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 8px;
      height: 8px;
      background: var(--color-error);
      border-radius: var(--radius-full);
      border: 2px solid var(--color-white);
    }

    .user-menu {
      position: relative;
    }

    .user-menu-trigger {
      display: flex;
      align-items: center;
      gap: var(--spacing-3);
      padding: var(--spacing-1) var(--spacing-2);
      background: none;
      border: 1px solid transparent;
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: all var(--transition-fast);
    }

    .user-menu-trigger:hover {
      background: var(--color-gray-50);
      border-color: var(--color-gray-200);
    }

    .user-avatar {
      width: 36px;
      height: 36px;
      background: linear-gradient(135deg, #818cf8, #6366f1);
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-weight: 600;
      font-size: var(--font-size-sm);
      flex-shrink: 0;
    }

    .user-info {
      text-align: left;
    }

    .user-info-name {
      font-size: var(--font-size-sm);
      font-weight: 600;
      color: var(--color-gray-800);
      line-height: 1.2;
    }

    .user-info-role {
      font-size: var(--font-size-xs);
      color: var(--color-gray-500);
      line-height: 1.2;
    }

    .user-menu-trigger .chevron-icon {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: var(--color-gray-400);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform var(--transition-fast);
    }

    .user-menu-trigger.active .chevron-icon {
      transform: rotate(180deg);
    }

    .user-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: 200px;
      background: var(--color-white);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      padding: var(--spacing-2);
      display: none;
      z-index: 200;
    }

    .user-dropdown.open {
      display: block;
    }

    .user-dropdown a {
      display: flex;
      align-items: center;
      gap: var(--spacing-3);
      padding: var(--spacing-2) var(--spacing-3);
      font-size: var(--font-size-sm);
      color: var(--color-gray-700);
      border-radius: var(--radius-md);
      transition: background var(--transition-fast);
      text-decoration: none;
    }

    .user-dropdown a:hover {
      background: var(--color-gray-50);
      text-decoration: none;
    }

    .user-dropdown a svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      color: var(--color-gray-400);
    }

    .dropdown-divider {
      height: 1px;
      background: var(--color-gray-100);
      margin: var(--spacing-2) 0;
    }

    .user-dropdown a.logout-link {
      color: var(--color-error);
    }

    .user-dropdown a.logout-link svg {
      color: var(--color-error);
    }

    /* --- Top Navigation Tabs --- */
    .client-nav {
      background: var(--color-white);
      border-bottom: 1px solid var(--color-gray-200);
      padding: 0 var(--spacing-8);
    }

    .client-nav-tabs {
      display: flex;
      gap: 0;
      list-style: none;
      max-width: 1200px;
      margin: 0 auto;
    }

    .client-nav-tabs li a {
      display: flex;
      align-items: center;
      gap: var(--spacing-2);
      padding: var(--spacing-4) var(--spacing-6);
      font-size: var(--font-size-sm);
      font-weight: 500;
      color: var(--color-gray-500);
      text-decoration: none;
      border-bottom: 2px solid transparent;
      transition: all var(--transition-fast);
      white-space: nowrap;
    }

    .client-nav-tabs li a:hover {
      color: var(--color-gray-700);
      text-decoration: none;
    }

    .client-nav-tabs li a.active {
      color: var(--color-primary);
      border-bottom-color: var(--color-primary);
    }

    .client-nav-tabs li a svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* --- Main Content --- */
    .client-main {
      max-width: 1200px;
      margin: 0 auto;
      padding: var(--spacing-8);
    }

    /* --- Welcome Section --- */
    .welcome-section {
      margin-bottom: var(--spacing-8);
    }

    .welcome-section h1 {
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--color-gray-900);
      margin-bottom: var(--spacing-2);
    }

    .welcome-section p {
      font-size: var(--font-size-base);
      color: var(--color-gray-500);
      margin-bottom: 0;
    }

    /* --- Section Titles --- */
    .section-title {
      font-size: var(--font-size-lg);
      font-weight: 600;
      color: var(--color-gray-900);
      margin-bottom: var(--spacing-5);
    }

    .section-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--spacing-5);
    }

    .section-title-row .section-title {
      margin-bottom: 0;
    }

    .view-all-link {
      font-size: var(--font-size-sm);
      font-weight: 500;
      color: var(--color-primary);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-1);
    }

    .view-all-link:hover {
      text-decoration: underline;
    }

    .view-all-link svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* --- Projects Grid (2 cards per row on client dashboard) --- */
    .projects-overview .projects-grid,
    .projects-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--spacing-6);
      margin-bottom: var(--spacing-10);
    }

    /* --- Project Card --- */
    .project-card {
      background: var(--color-white);
      border-radius: var(--radius-xl);
      padding: var(--spacing-6);
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--color-gray-200);
      transition: box-shadow var(--transition-base), border-color var(--transition-base);
    }

    .project-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--color-gray-300);
    }

    .project-card-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: var(--spacing-5);
    }

    .project-card-title {
      font-size: var(--font-size-lg);
      font-weight: 600;
      color: var(--color-gray-900);
      margin-bottom: var(--spacing-1);
    }

    .project-card-subtitle {
      font-size: var(--font-size-sm);
      color: var(--color-gray-500);
      margin-bottom: 0;
    }

    .status-badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      font-size: var(--font-size-xs);
      font-weight: 600;
      border-radius: var(--radius-full);
      white-space: nowrap;
    }

    .status-badge.on-track {
      background: var(--color-success-light);
      color: var(--color-success-dark);
    }

    .status-badge.in-progress {
      background: var(--color-info-light);
      color: #1d4ed8;
    }

    .status-badge.completed {
      background: #d1fae5;
      color: #065f46;
    }

    .project-card-body {
      display: flex;
      gap: var(--spacing-6);
      align-items: center;
      margin-bottom: var(--spacing-5);
    }

    /* Donut Progress */
    .progress-donut {
      width: 100px;
      height: 100px;
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      position: relative;
    }

    .progress-donut-inner {
      width: 68px;
      height: 68px;
      background: var(--color-white);
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
    }

    .progress-donut-value {
      font-size: var(--font-size-lg);
      font-weight: 700;
      color: var(--color-gray-900);
    }

    .project-details {
      flex: 1;
    }

    .project-detail-row {
      display: flex;
      align-items: center;
      gap: var(--spacing-2);
      margin-bottom: var(--spacing-2);
      font-size: var(--font-size-sm);
      color: var(--color-gray-600);
    }

    .project-detail-row:last-child {
      margin-bottom: 0;
    }

    .project-detail-row svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      color: var(--color-gray-400);
      flex-shrink: 0;
    }

    .project-detail-label {
      color: var(--color-gray-500);
    }

    .project-detail-value {
      font-weight: 500;
      color: var(--color-gray-700);
    }

    .project-card-footer {
      padding-top: var(--spacing-4);
      border-top: 1px solid var(--color-gray-100);
    }

    .btn-view-project {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-2);
      padding: var(--spacing-2) var(--spacing-4);
      font-size: var(--font-size-sm);
      font-weight: 500;
      color: var(--color-primary);
      background: var(--color-primary-light);
      border: none;
      border-radius: var(--radius-md);
      cursor: pointer;
      text-decoration: none;
      transition: all var(--transition-fast);
    }

    .btn-view-project:hover {
      background: var(--color-primary-100);
      text-decoration: none;
    }

    .btn-view-project svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* --- Detail Section --- */
    .detail-section {
      background: var(--color-white);
      border-radius: var(--radius-xl);
      padding: var(--spacing-8);
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--color-gray-200);
      margin-bottom: var(--spacing-8);
    }

    .detail-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--spacing-6);
      padding-bottom: var(--spacing-4);
      border-bottom: 1px solid var(--color-gray-100);
    }

    .detail-section-header h2 {
      font-size: var(--font-size-xl);
      font-weight: 600;
      color: var(--color-gray-900);
    }

    .detail-section-header .status-badge {
      font-size: var(--font-size-xs);
    }

    /* --- Stat Cards --- */
    .stat-cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--spacing-4);
      margin-bottom: var(--spacing-8);
    }

    .stat-card {
      background: var(--color-gray-50);
      border-radius: var(--radius-lg);
      padding: var(--spacing-5);
      text-align: center;
      border: 1px solid var(--color-gray-100);
    }

    .stat-card-value {
      font-size: 2rem;
      font-weight: 700;
      line-height: 1;
      margin-bottom: var(--spacing-2);
    }

    .stat-card-value.green { color: var(--color-success); }
    .stat-card-value.blue { color: var(--color-info); }
    .stat-card-value.gray { color: var(--color-gray-400); }

    .stat-card-label {
      font-size: var(--font-size-sm);
      color: var(--color-gray-500);
      font-weight: 500;
    }

    /* --- Milestones Timeline --- */
    .milestones-section {
      margin-bottom: var(--spacing-8);
    }

    .milestones-section h3 {
      font-size: var(--font-size-lg);
      font-weight: 600;
      margin-bottom: var(--spacing-5);
      color: var(--color-gray-900);
    }

    .milestones-timeline {
      position: relative;
      padding-left: 32px;
    }

    .milestones-timeline::before {
      content: '';
      position: absolute;
      left: 11px;
      top: 8px;
      bottom: 8px;
      width: 2px;
      background: var(--color-gray-200);
    }

    .milestone-item {
      position: relative;
      padding-bottom: var(--spacing-5);
      display: flex;
      align-items: flex-start;
      gap: var(--spacing-4);
    }

    .milestone-item:last-child {
      padding-bottom: 0;
    }

    .milestone-dot {
      position: absolute;
      left: -32px;
      top: 2px;
      width: 22px;
      height: 22px;
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      z-index: 1;
    }

    .milestone-dot.completed {
      background: var(--color-success);
    }

    .milestone-dot.in-progress {
      background: var(--color-info);
      box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
    }

    .milestone-dot.upcoming {
      background: var(--color-white);
      border: 2px solid var(--color-gray-300);
    }

    .milestone-dot svg {
      width: 12px;
      height: 12px;
      fill: none;
      stroke: var(--color-white);
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .milestone-dot.upcoming svg {
      stroke: var(--color-gray-400);
    }

    .milestone-dot.in-progress .dot-inner {
      width: 8px;
      height: 8px;
      background: var(--color-white);
      border-radius: var(--radius-full);
    }

    .milestone-content {
      flex: 1;
      min-width: 0;
    }

    .milestone-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--spacing-1);
    }

    .milestone-name {
      font-size: var(--font-size-sm);
      font-weight: 600;
      color: var(--color-gray-800);
    }

    .milestone-item.current .milestone-name {
      color: var(--color-info);
    }

    .milestone-date {
      font-size: var(--font-size-xs);
      color: var(--color-gray-500);
    }

    .milestone-status-label {
      font-size: var(--font-size-xs);
      font-weight: 500;
      padding: 2px 8px;
      border-radius: var(--radius-full);
    }

    .milestone-status-label.completed {
      color: var(--color-success-dark);
      background: var(--color-success-light);
    }

    .milestone-status-label.in-progress {
      color: #1d4ed8;
      background: var(--color-info-light);
    }

    .milestone-status-label.upcoming {
      color: var(--color-gray-500);
      background: var(--color-gray-100);
    }

    .milestone-deliverables {
      font-size: var(--font-size-xs);
      color: var(--color-gray-400);
      margin-top: var(--spacing-1);
    }

    /* --- Deliverables Table --- */
    .deliverables-section {
      margin-bottom: var(--spacing-8);
    }

    .deliverables-section h3 {
      font-size: var(--font-size-lg);
      font-weight: 600;
      margin-bottom: var(--spacing-5);
      color: var(--color-gray-900);
    }

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

    .client-table thead th {
      text-align: left;
      font-size: var(--font-size-xs);
      font-weight: 600;
      color: var(--color-gray-500);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: var(--spacing-3) var(--spacing-4);
      border-bottom: 1px solid var(--color-gray-200);
      background: var(--color-gray-50);
    }

    .client-table thead th:first-child {
      border-radius: var(--radius-md) 0 0 0;
    }

    .client-table thead th:last-child {
      border-radius: 0 var(--radius-md) 0 0;
    }

    .client-table tbody td {
      padding: var(--spacing-3) var(--spacing-4);
      font-size: var(--font-size-sm);
      color: var(--color-gray-700);
      border-bottom: 1px solid var(--color-gray-100);
    }

    .client-table tbody tr:hover {
      background: var(--color-gray-50);
    }

    .client-table tbody tr:last-child td {
      border-bottom: none;
    }

    .attachment-link {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-1);
      color: var(--color-primary);
      font-size: var(--font-size-sm);
      font-weight: 500;
    }

    .attachment-link svg {
      width: 14px;
      height: 14px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* --- Progress Charts Row --- */
    .charts-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--spacing-6);
      margin-bottom: var(--spacing-8);
    }

    .chart-card {
      background: var(--color-gray-50);
      border-radius: var(--radius-lg);
      padding: var(--spacing-6);
      border: 1px solid var(--color-gray-100);
      text-align: center;
    }

    .chart-card h4 {
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--color-gray-800);
        margin-bottom: var(--spacing-5);
    }

    .chart-card:has(.chart-card-subtitle) > h4 {
        margin-bottom: var(--spacing-2);
    }

    .chart-card-subtitle {
        font-size: var(--font-size-xs);
        color: var(--color-gray-500);
        line-height: 1.45;
        margin: 0 auto var(--spacing-4);
        max-width: 22rem;
    }

    .portfolio-detail-card {
        text-align: left;
    }

    .portfolio-detail-card h4 {
        text-align: center;
        margin-bottom: var(--spacing-2);
    }

    .portfolio-detail-card .chart-card-subtitle {
        text-align: center;
        display: block;
        max-width: none;
    }

    .portfolio-distribution-bar {
        display: flex;
        width: 100%;
        height: 12px;
        border-radius: var(--radius-full);
        overflow: hidden;
        background: var(--color-gray-100);
    }

    .portfolio-distribution-bar--empty {
        min-height: 12px;
        opacity: 0.6;
    }

    .portfolio-distribution-seg {
        display: block;
        min-width: 2px;
        height: 100%;
    }

    .portfolio-distribution-seg.completed {
        background: var(--color-success);
    }

    .portfolio-distribution-seg.in-progress {
        background: var(--color-info);
    }

    .portfolio-distribution-seg.upcoming {
        background: var(--color-gray-300);
    }

    .project-breakdown-legend {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-3);
        font-size: var(--font-size-xs);
        color: var(--color-gray-600);
        margin-top: var(--spacing-2);
        line-height: 1.4;
    }

    .project-breakdown-legend-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .donut-legend--wrap {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: var(--spacing-2);
    }

    .milestone-bar-label--emphasis {
        font-weight: 600;
        color: var(--color-gray-700);
        margin-top: var(--spacing-3);
    }

    .milestone-timeline-label {
        font-size: var(--font-size-xs);
        color: var(--color-gray-400);
        margin: var(--spacing-3) 0 var(--spacing-2);
        font-weight: 500;
    }

    .milestone-empty-note {
        font-size: var(--font-size-sm);
        color: var(--color-gray-500);
        margin: var(--spacing-2) 0 0;
    }

    /* Large Donut */
    .large-donut-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .large-donut {
      width: 160px;
      height: 160px;
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .large-donut-inner {
      width: 108px;
      height: 108px;
      background: var(--color-gray-50);
      border-radius: var(--radius-full);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }

    .large-donut-value {
      font-size: var(--font-size-2xl);
      font-weight: 700;
      color: var(--color-gray-900);
      line-height: 1;
    }

    .large-donut-label {
      font-size: var(--font-size-xs);
      color: var(--color-gray-500);
      margin-top: var(--spacing-1);
    }

    .donut-legend {
      display: flex;
      justify-content: center;
      gap: var(--spacing-5);
      margin-top: var(--spacing-4);
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: var(--spacing-2);
      font-size: var(--font-size-xs);
      color: var(--color-gray-600);
    }

    .legend-dot {
      width: 10px;
      height: 10px;
      border-radius: var(--radius-full);
      flex-shrink: 0;
    }

    .legend-dot.green { background: var(--color-success); }
    .legend-dot.blue { background: var(--color-info); }
    .legend-dot.gray { background: var(--color-gray-300); }

    /* Milestone Progress Bar */
    .milestone-progress-visual {
      margin-top: var(--spacing-4);
    }

    .segmented-bar {
      display: flex;
      gap: 4px;
      margin-bottom: var(--spacing-3);
    }

    .segmented-bar .segment {
      flex: 1;
      height: 28px;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 600;
      color: var(--color-white);
      transition: transform var(--transition-fast);
    }

    .segmented-bar .segment:hover {
      transform: scaleY(1.1);
    }

    .segmented-bar .segment.completed {
      background: var(--color-success);
    }

    .segmented-bar .segment.in-progress {
      background: var(--color-info);
    }

    .segmented-bar .segment.upcoming {
      background: var(--color-gray-300);
      color: var(--color-gray-600);
    }

    .milestone-bar-label {
      font-size: var(--font-size-sm);
      color: var(--color-gray-500);
      font-weight: 500;
    }

    /* --- Per-Project Progress Bars --- */
    .project-progress-list {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-5);
      margin-top: var(--spacing-5);
    }

    .project-progress-item {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-2);
    }

    .project-progress-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .project-progress-name {
      font-size: var(--font-size-sm);
      font-weight: 600;
      color: var(--color-gray-800);
    }

    .project-progress-pct {
      font-size: var(--font-size-sm);
      font-weight: 700;
      color: var(--color-gray-700);
    }

    .project-bar {
      height: 10px;
      background: var(--color-gray-200);
      border-radius: var(--radius-full);
      overflow: hidden;
    }

    .project-bar-fill {
      height: 100%;
      border-radius: var(--radius-full);
      transition: width var(--transition-slow);
    }

    .project-bar-fill.green {
      background: var(--color-success);
    }

    .project-bar-fill.blue {
      background: var(--color-info);
    }

    .project-progress-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: var(--font-size-xs);
      color: var(--color-gray-500);
    }

    /* --- Upcoming Milestones Grid --- */
    .upcoming-milestones-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--spacing-4);
    }

    .upcoming-milestone-card {
      background: var(--color-gray-50);
      border: 1px solid var(--color-gray-100);
      border-radius: var(--radius-lg);
      padding: var(--spacing-4);
    }

    .upcoming-milestone-card .um-project {
      font-size: var(--font-size-xs);
      font-weight: 600;
      color: var(--color-primary);
      margin-bottom: var(--spacing-1);
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

    .upcoming-milestone-card .um-name {
      font-size: var(--font-size-sm);
      font-weight: 600;
      color: var(--color-gray-800);
      margin-bottom: var(--spacing-2);
    }

    .upcoming-milestone-card .um-date {
      font-size: var(--font-size-xs);
      color: var(--color-gray-500);
      display: flex;
      align-items: center;
      gap: var(--spacing-1);
    }

    .upcoming-milestone-card .um-date svg {
      width: 12px;
      height: 12px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* --- Recent Activity Timeline --- */
    .activity-timeline {
      position: relative;
      padding-left: 24px;
    }

    .activity-timeline::before {
      content: '';
      position: absolute;
      left: 7px;
      top: 4px;
      bottom: 4px;
      width: 2px;
      background: var(--color-gray-200);
    }

    .activity-item {
      position: relative;
      padding-bottom: var(--spacing-4);
    }

    .activity-item:last-child {
      padding-bottom: 0;
    }

    .activity-dot {
      position: absolute;
      left: -24px;
      top: 3px;
      width: 16px;
      height: 16px;
      border-radius: var(--radius-full);
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .activity-dot.green { background: var(--color-success); }
    .activity-dot.blue { background: var(--color-info); }
    .activity-dot.purple { background: var(--color-primary-500); }

    .activity-dot svg {
      width: 9px;
      height: 9px;
      fill: none;
      stroke: var(--color-white);
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .activity-text {
      font-size: var(--font-size-sm);
      color: var(--color-gray-700);
      line-height: 1.4;
    }

    .activity-text strong {
      font-weight: 600;
      color: var(--color-gray-800);
    }

    .activity-meta {
      font-size: var(--font-size-xs);
      color: var(--color-gray-400);
      margin-top: 2px;
    }

    /* --- Communication Section --- */
    .communication-section {
      margin-bottom: var(--spacing-8);
    }

    .comm-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--spacing-6);
    }

    .comm-card {
      background: var(--color-white);
      border-radius: var(--radius-xl);
      padding: var(--spacing-6);
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--color-gray-200);
    }

    .comm-card h3 {
      font-size: var(--font-size-base);
      font-weight: 600;
      color: var(--color-gray-900);
      margin-bottom: var(--spacing-5);
    }

    .comm-actions {
      display: flex;
      gap: var(--spacing-3);
      margin-bottom: var(--spacing-5);
    }

    .btn-comm {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-2);
      padding: var(--spacing-2) var(--spacing-4);
      font-size: var(--font-size-sm);
      font-weight: 500;
      border-radius: var(--radius-md);
      border: none;
      cursor: pointer;
      transition: all var(--transition-fast);
    }

    .btn-comm svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

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

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

    .btn-comm.secondary {
      background: var(--color-gray-100);
      color: var(--color-gray-700);
    }

    .btn-comm.secondary:hover {
      background: var(--color-gray-200);
    }

    /* Feedback Form */
    .feedback-form {
      display: none;
      margin-top: var(--spacing-4);
      padding-top: var(--spacing-4);
      border-top: 1px solid var(--color-gray-100);
    }

    .feedback-form.open {
      display: block;
    }

    .feedback-form .form-group {
      margin-bottom: var(--spacing-4);
    }

    .feedback-form label {
      display: block;
      font-size: var(--font-size-sm);
      font-weight: 500;
      color: var(--color-gray-700);
      margin-bottom: var(--spacing-2);
    }

    .feedback-form .form-input,
    .feedback-form .form-select,
    .feedback-form .form-textarea {
      display: block;
      width: 100%;
      padding: var(--spacing-2) var(--spacing-3);
      font-family: var(--font-family);
      font-size: var(--font-size-sm);
      color: var(--color-gray-800);
      background: var(--color-white);
      border: 1.5px solid var(--color-gray-300);
      border-radius: var(--radius-md);
      outline: none;
      transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    .feedback-form .form-input:focus,
    .feedback-form .form-select:focus,
    .feedback-form .form-textarea:focus {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(0, 89, 131, 0.12);
    }

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

    .feedback-form .form-select {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      padding-right: 36px;
    }

    /* Contact Info Card */
    .contact-info-card {
      display: none;
      margin-top: var(--spacing-4);
      padding: var(--spacing-4);
      background: var(--color-gray-50);
      border-radius: var(--radius-md);
      border: 1px solid var(--color-gray-100);
    }

    .contact-info-card.open {
      display: block;
    }

    .contact-info-row {
      display: flex;
      align-items: center;
      gap: var(--spacing-3);
      margin-bottom: var(--spacing-3);
      font-size: var(--font-size-sm);
      color: var(--color-gray-700);
    }

    .contact-info-row:last-child {
      margin-bottom: 0;
    }

    .contact-info-row svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: var(--color-gray-400);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }

    /* Messages List */
    .messages-list {
      list-style: none;
    }

    .message-item {
      display: flex;
      gap: var(--spacing-3);
      padding: var(--spacing-3) 0;
      border-bottom: 1px solid var(--color-gray-100);
    }

    .message-item:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .message-dot {
      width: 8px;
      height: 8px;
      background: var(--color-primary-500);
      border-radius: var(--radius-full);
      flex-shrink: 0;
      margin-top: 6px;
    }

    .message-content {
      flex: 1;
    }

    .message-text {
      font-size: var(--font-size-sm);
      color: var(--color-gray-700);
      line-height: 1.5;
      margin-bottom: 2px;
    }

    .message-date {
      font-size: var(--font-size-xs);
      color: var(--color-gray-400);
    }

    /* --- Documents Section --- */
    .documents-section {
      margin-bottom: var(--spacing-8);
    }

    .download-icon-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: var(--radius-md);
      background: var(--color-primary-light);
      border: none;
      cursor: pointer;
      color: var(--color-primary);
      transition: all var(--transition-fast);
    }

    .download-icon-btn:hover {
      background: var(--color-primary-100);
    }

    .download-icon-btn svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .doc-icon {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-2);
    }

    .doc-icon svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: var(--color-gray-400);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }

    /* --- Client Footer --- */
    .client-footer {
      text-align: center;
      padding: var(--spacing-8) var(--spacing-4);
      border-top: 1px solid var(--color-gray-200);
      margin-top: var(--spacing-8);
    }

    .client-footer p {
      font-size: var(--font-size-sm);
      color: var(--color-gray-400);
      margin-bottom: var(--spacing-2);
    }

    .client-footer a {
      font-size: var(--font-size-sm);
      color: var(--color-primary);
      font-weight: 500;
    }

    /* --- Collapsible Sections --- */
    .collapsible-trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      text-align: left;
    }

    .collapsible-trigger .collapse-icon {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: var(--color-gray-400);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform var(--transition-fast);
    }

    .collapsible-trigger.collapsed .collapse-icon {
      transform: rotate(-90deg);
    }

    .collapsible-content {
      overflow: hidden;
      transition: max-height var(--transition-slow);
    }

    .collapsible-content.collapsed {
      max-height: 0 !important;
    }

    /* --- Responsive --- */
    @media (max-width: 768px) {
      .projects-overview .projects-grid,
      .projects-grid {
        grid-template-columns: 1fr;
      }

      .charts-row {
        grid-template-columns: 1fr;
      }

      .comm-grid {
        grid-template-columns: 1fr;
      }

      .stat-cards {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 768px) {
      .client-header {
        padding: 0 var(--spacing-4);
      }

      .client-header-center {
        display: none;
      }

      .client-nav {
        padding: 0 var(--spacing-4);
        overflow-x: auto;
      }

      .client-main {
        padding: var(--spacing-4);
      }

      .detail-section {
        padding: var(--spacing-5);
      }

      .user-info {
        display: none;
      }
    }
  


/* ========================================
   Page: project-detail.html
   ======================================== */

    /* ========================================
       Project Detail - Client Portal
       ======================================== */
    body {
      background-color: var(--gray-50);
    }

    /* --- Client Header --- */
    .client-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 var(--space-xl);
      height: var(--header-height);
      background: var(--white);
      border-bottom: 1px solid var(--gray-200);
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .client-header-left {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
    }

    .client-logo-icon {
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, #6366f1, #4f46e5);
      border-radius: var(--radius-lg);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-weight: 700;
      font-size: var(--text-sm);
      letter-spacing: 0.5px;
      flex-shrink: 0;
    }

    .client-company-name {
      font-size: var(--text-lg);
      font-weight: 600;
      color: var(--gray-900);
    }

    .client-header-center {
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--gray-500);
      text-transform: uppercase;
      letter-spacing: 1.5px;
    }

    .client-header-right {
      display: flex;
      align-items: center;
      gap: var(--space-md);
    }

    .notification-btn {
      position: relative;
      background: none;
      border: none;
      cursor: pointer;
      padding: var(--space-sm);
      color: var(--gray-500);
      border-radius: var(--radius-md);
      transition: all var(--transition-fast);
    }

    .notification-btn:hover {
      background: var(--gray-100);
      color: var(--gray-700);
    }

    .notification-btn svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .notif-dot {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 8px;
      height: 8px;
      background: var(--danger);
      border-radius: var(--radius-full);
      border: 2px solid var(--white);
    }

    .user-menu {
      position: relative;
    }

    .user-menu-trigger {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: 4px var(--space-sm);
      background: none;
      border: 1px solid transparent;
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: all var(--transition-fast);
    }

    .user-menu-trigger:hover {
      background: var(--gray-50);
      border-color: var(--gray-200);
    }

    .user-avatar {
      width: 36px;
      height: 36px;
      background: linear-gradient(135deg, #818cf8, #6366f1);
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-weight: 600;
      font-size: var(--text-sm);
      flex-shrink: 0;
    }

    .user-info {
      text-align: left;
    }

    .user-info-name {
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--gray-800);
      line-height: 1.2;
    }

    .user-info-role {
      font-size: var(--text-xs);
      color: var(--gray-500);
      line-height: 1.2;
    }

    .user-menu-trigger .chevron-icon {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: var(--gray-400);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform var(--transition-fast);
    }

    .user-menu-trigger.active .chevron-icon {
      transform: rotate(180deg);
    }

    .user-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: 200px;
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      padding: var(--space-xs) 0;
      display: none;
      z-index: 200;
    }

    .user-dropdown.open {
      display: block;
    }

    .user-dropdown a {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-sm) var(--space-md);
      font-size: var(--text-sm);
      color: var(--gray-700);
      border-radius: var(--radius-md);
      transition: background var(--transition-fast);
      text-decoration: none;
      margin: 0 var(--space-xs);
    }

    .user-dropdown a:hover {
      background: var(--gray-50);
    }

    .user-dropdown a svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      color: var(--gray-400);
    }

    .user-dropdown .dropdown-divider {
      height: 1px;
      background: var(--gray-100);
      margin: var(--space-xs) 0;
    }

    .user-dropdown a.logout-link {
      color: var(--danger);
    }

    .user-dropdown a.logout-link svg {
      color: var(--danger);
    }

    /* --- Top Navigation Tabs --- */
    .client-nav {
      background: var(--white);
      border-bottom: 1px solid var(--gray-200);
      padding: 0 var(--space-xl);
    }

    .client-nav-tabs {
      display: flex;
      gap: 0;
      list-style: none;
      max-width: 1200px;
      margin: 0 auto;
    }

    .client-nav-tabs li a {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-md) var(--space-lg);
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--gray-500);
      text-decoration: none;
      border-bottom: 2px solid transparent;
      transition: all var(--transition-fast);
      white-space: nowrap;
    }

    .client-nav-tabs li a:hover {
      color: var(--gray-700);
    }

    .client-nav-tabs li a.active {
      color: var(--primary);
      border-bottom-color: var(--primary);
    }

    .client-nav-tabs li a svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* --- Main Content --- */
    .client-main {
      max-width: 1200px;
      margin: 0 auto;
      padding: var(--space-xl);
    }

    /* --- Page Header with Back --- */
    .page-header-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--space-xl);
      flex-wrap: wrap;
      gap: var(--space-md);
    }

    .page-header-left {
      display: flex;
      align-items: center;
      gap: var(--space-md);
    }

    .back-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: var(--radius-md);
      color: var(--gray-500);
      transition: all var(--transition-fast);
      text-decoration: none;
    }

    .back-link:hover {
      background: var(--gray-100);
      color: var(--gray-700);
    }

    .back-link svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .page-title-group h1 {
      font-size: var(--text-2xl);
      font-weight: 700;
      color: var(--gray-900);
      margin-bottom: 4px;
    }

    .page-title-meta {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
    }

    .status-badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      font-size: var(--text-xs);
      font-weight: 600;
      border-radius: var(--radius-full);
      white-space: nowrap;
    }

    .status-badge.on-track {
      background: var(--success-light);
      color: var(--success-dark);
    }

    .status-badge.in-progress {
      background: var(--info-light);
      color: var(--info-dark);
    }

    .status-badge.completed {
      background: #d1fae5;
      color: #065f46;
    }

    .status-badge.planned {
      background: var(--gray-100);
      color: var(--gray-600);
    }

    .progress-text {
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--gray-500);
    }

    /* --- Large Progress Donut --- */
    .progress-hero {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-xl);
      padding: var(--space-xl);
      margin-bottom: var(--space-xl);
      display: flex;
      align-items: center;
      gap: var(--space-3xl);
      box-shadow: var(--shadow-sm);
    }

    .donut-large {
      width: 200px;
      height: 200px;
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      position: relative;
    }

    .donut-large-inner {
      width: 140px;
      height: 140px;
      background: var(--white);
      border-radius: var(--radius-full);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }

    .donut-large-value {
      font-size: 2.5rem;
      font-weight: 800;
      color: var(--gray-900);
      line-height: 1;
    }

    .donut-large-label {
      font-size: var(--text-sm);
      color: var(--gray-500);
      margin-top: var(--space-xs);
    }

    .progress-hero-info {
      flex: 1;
    }

    .progress-hero-info p {
      font-size: var(--text-base);
      color: var(--gray-600);
      margin-bottom: var(--space-lg);
    }

    .info-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-md);
    }

    .info-item {
      text-align: center;
      padding: var(--space-md);
      background: var(--gray-50);
      border-radius: var(--radius-lg);
      border: 1px solid var(--gray-100);
    }

    .info-item-label {
      font-size: var(--text-xs);
      color: var(--gray-500);
      font-weight: 500;
      margin-bottom: var(--space-xs);
    }

    .info-item-value {
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--gray-800);
    }

    .info-item-value.green {
      color: var(--success);
    }

    /* --- Section Card --- */
    .section-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-xl);
      padding: var(--space-xl);
      margin-bottom: var(--space-xl);
      box-shadow: var(--shadow-sm);
    }

    .section-card-title {
      font-size: var(--text-lg);
      font-weight: 600;
      color: var(--gray-900);
      margin-bottom: var(--space-lg);
    }

    /* --- Milestones Timeline --- */
    .timeline {
      position: relative;
      padding-left: 36px;
    }

    .timeline::before {
      content: '';
      position: absolute;
      left: 11px;
      top: 8px;
      bottom: 8px;
      width: 2px;
      background: var(--gray-200);
    }

    .timeline-item {
      position: relative;
      padding-bottom: var(--space-xl);
    }

    .timeline-item:last-child {
      padding-bottom: 0;
    }

    .timeline-dot {
      position: absolute;
      left: -36px;
      top: 2px;
      width: 22px;
      height: 22px;
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      z-index: 1;
    }

    .timeline-dot.done {
      background: var(--success);
    }

    .timeline-dot.current {
      background: var(--primary);
      box-shadow: 0 0 0 4px rgba(0, 89, 131, 0.2);
    }

    .timeline-dot.pending {
      background: var(--white);
      border: 2px solid var(--gray-300);
    }

    .timeline-dot svg {
      width: 12px;
      height: 12px;
      fill: none;
      stroke: var(--white);
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .timeline-dot.pending svg {
      stroke: var(--gray-400);
      stroke-width: 2;
    }

    .timeline-dot.current .dot-pulse {
      width: 8px;
      height: 8px;
      background: var(--white);
      border-radius: var(--radius-full);
    }

    .timeline-content {
      min-width: 0;
    }

    .timeline-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 2px;
      flex-wrap: wrap;
      gap: var(--space-sm);
    }

    .timeline-title {
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--gray-800);
    }

    .timeline-item.is-current .timeline-title {
      color: var(--primary);
    }

    .timeline-date {
      font-size: var(--text-xs);
      color: var(--gray-500);
    }

    .timeline-desc {
      font-size: var(--text-sm);
      color: var(--gray-500);
      margin-top: 2px;
      margin-bottom: 0;
    }

    .milestone-status {
      font-size: var(--text-xs);
      font-weight: 500;
      padding: 2px 8px;
      border-radius: var(--radius-full);
    }

    .milestone-status.done {
      color: var(--success-dark);
      background: var(--success-light);
    }

    .milestone-status.current {
      color: var(--primary-dark);
      background: var(--primary-100);
    }

    .milestone-status.pending {
      color: var(--gray-500);
      background: var(--gray-100);
    }

    .milestone-progress {
      margin-top: var(--space-sm);
    }

    .milestone-progress-bar {
      width: 100%;
      height: 6px;
      background: var(--gray-200);
      border-radius: var(--radius-full);
      overflow: hidden;
    }

    .milestone-progress-fill {
      height: 100%;
      background: var(--primary);
      border-radius: var(--radius-full);
      transition: width var(--transition-slow);
    }

    .milestone-progress-label {
      font-size: var(--text-xs);
      color: var(--gray-500);
      margin-top: 4px;
    }

    /* --- Deliverables List --- */
    .deliverables-group {
      margin-bottom: var(--space-lg);
    }

    .deliverables-group:last-child {
      margin-bottom: 0;
    }

    .deliverables-group-title {
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--gray-700);
      margin-bottom: var(--space-sm);
      display: flex;
      align-items: center;
      gap: var(--space-sm);
    }

    .deliverables-group-count {
      font-size: var(--text-xs);
      font-weight: 500;
      color: var(--gray-500);
      background: var(--gray-100);
      padding: 1px 8px;
      border-radius: var(--radius-full);
    }

    .deliverable-item {
      display: flex;
      align-items: center;
      padding: var(--space-sm) var(--space-md);
      border: 1px solid var(--gray-100);
      border-radius: var(--radius-md);
      margin-bottom: var(--space-xs);
      transition: all var(--transition-fast);
      cursor: pointer;
    }

    .deliverable-item:hover {
      background: var(--gray-50);
      border-color: var(--gray-200);
    }

    .deliverable-item.expanded {
      border-color: var(--primary-100);
      background: var(--primary-50);
    }

    .deliverable-icon {
      width: 24px;
      height: 24px;
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-right: var(--space-sm);
    }

    .deliverable-icon.done {
      background: var(--success-light);
      color: var(--success);
    }

    .deliverable-icon.progress {
      background: var(--primary-100);
      color: var(--primary);
    }

    .deliverable-icon.planned {
      background: var(--gray-100);
      color: var(--gray-400);
    }

    .deliverable-icon svg {
      width: 14px;
      height: 14px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .deliverable-name {
      flex: 1;
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--gray-800);
    }

    .deliverable-meta {
      font-size: var(--text-xs);
      color: var(--gray-500);
      margin-right: var(--space-md);
    }

    .deliverable-files {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: var(--text-xs);
      color: var(--primary);
      font-weight: 500;
    }

    .deliverable-files svg {
      width: 14px;
      height: 14px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .deliverable-expand {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: var(--gray-400);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      margin-left: var(--space-sm);
      transition: transform var(--transition-fast);
    }

    .deliverable-item.expanded .deliverable-expand {
      transform: rotate(180deg);
    }

    .view-all-completed {
      display: inline-flex;
      align-items: center;
      gap: var(--space-xs);
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--primary);
      text-decoration: none;
      margin-top: var(--space-sm);
      padding: var(--space-xs) 0;
      cursor: pointer;
      border: none;
      background: none;
    }

    .view-all-completed:hover {
      text-decoration: underline;
    }

    .view-all-completed svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* --- Deliverable Detail Panel --- */
    .deliverable-detail {
      display: none;
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-lg);
      padding: var(--space-lg);
      margin-top: var(--space-xs);
      margin-bottom: var(--space-sm);
      animation: slideUp var(--transition-base) ease-out;
    }

    .deliverable-detail.open {
      display: block;
    }

    .detail-status-row {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      margin-bottom: var(--space-md);
    }

    .detail-description {
      font-size: var(--text-sm);
      color: var(--gray-600);
      line-height: 1.6;
      margin-bottom: var(--space-lg);
    }

    .detail-description p {
      margin-bottom: 0;
    }

    .comments-section h5 {
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--gray-800);
      margin-bottom: var(--space-md);
    }

    .comment-item {
      display: flex;
      gap: var(--space-sm);
      margin-bottom: var(--space-md);
    }

    .comment-avatar {
      width: 32px;
      height: 32px;
      background: linear-gradient(135deg, #818cf8, #6366f1);
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      font-weight: 600;
      font-size: var(--text-xs);
      flex-shrink: 0;
    }

    .comment-body {
      flex: 1;
    }

    .comment-author {
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--gray-800);
    }

    .comment-date {
      font-size: var(--text-xs);
      color: var(--gray-400);
      margin-left: var(--space-sm);
    }

    .comment-text {
      font-size: var(--text-sm);
      color: var(--gray-600);
      margin-top: 2px;
      margin-bottom: 0;
    }

    .comment-form {
      margin-top: var(--space-md);
      padding-top: var(--space-md);
      border-top: 1px solid var(--gray-100);
    }

    .comment-form textarea {
      width: 100%;
      padding: var(--space-sm) var(--space-md);
      font-size: var(--text-sm);
      font-family: inherit;
      color: var(--gray-800);
      background: var(--white);
      border: 1.5px solid var(--gray-300);
      border-radius: var(--radius-md);
      resize: vertical;
      min-height: 80px;
      transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    .comment-form textarea:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(0, 89, 131, 0.15);
    }

    .comment-form-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: var(--space-sm);
    }

    /* --- Documents Table --- */
    .docs-table {
      width: 100%;
      border-collapse: collapse;
    }

    .docs-table thead th {
      text-align: left;
      font-size: var(--text-xs);
      font-weight: 600;
      color: var(--gray-500);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: var(--space-sm) var(--space-md);
      border-bottom: 1px solid var(--gray-200);
      background: var(--gray-50);
    }

    .docs-table tbody td {
      padding: var(--space-sm) var(--space-md);
      font-size: var(--text-sm);
      color: var(--gray-700);
      border-bottom: 1px solid var(--gray-100);
    }

    .docs-table tbody tr:last-child td {
      border-bottom: none;
    }

    .docs-table tbody tr:hover {
      background: var(--gray-50);
    }

    .doc-name {
      display: inline-flex;
      align-items: center;
      gap: var(--space-sm);
      font-weight: 500;
    }

    .doc-name svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: var(--gray-400);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }

    .download-btn {
      display: inline-flex;
      align-items: center;
      gap: var(--space-xs);
      padding: 6px 14px;
      font-size: var(--text-xs);
      font-weight: 500;
      color: var(--primary);
      background: var(--primary-50);
      border: none;
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: all var(--transition-fast);
    }

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

    .download-btn svg {
      width: 14px;
      height: 14px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* --- Client Footer --- */
    .client-footer {
      text-align: center;
      padding: var(--space-xl) var(--space-md);
      border-top: 1px solid var(--gray-200);
      margin-top: var(--space-xl);
    }

    .client-footer p {
      font-size: var(--text-sm);
      color: var(--gray-400);
      margin-bottom: 0;
    }

    /* --- Charts Section --- */
    .charts-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    .chart-card {
      background: var(--gray-50);
      border: 1px solid var(--gray-100);
      border-radius: var(--radius-lg);
      padding: var(--space-lg);
      text-align: center;
    }

    .chart-card-title {
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--gray-800);
      margin-bottom: var(--space-md);
    }

    /* Project detail analytics: milestone breakdown matches client dashboard */
    .project-analytics-milestone-subtitle {
      font-size: var(--text-xs);
      color: var(--gray-500);
      line-height: 1.45;
      margin: 0 auto var(--space-md);
      max-width: 22rem;
    }

    .project-analytics-milestone .segmented-bar {
      gap: 4px;
      max-width: none;
      height: auto;
      min-height: 0;
      overflow: visible;
      border-radius: 0;
      margin: 0 auto var(--space-sm);
    }

    .project-analytics-milestone .segmented-bar .segment {
      flex: 1;
      min-width: 2px;
      height: 28px;
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 600;
      color: var(--white);
      transition: transform var(--transition-fast);
    }

    .project-analytics-milestone .segmented-bar .segment:hover {
      transform: scaleY(1.08);
    }

    .project-analytics-milestone .segmented-bar .segment.completed {
      background: var(--success);
    }

    .project-analytics-milestone .segmented-bar .segment.in-progress {
      background: var(--primary);
    }

    .project-analytics-milestone .segmented-bar .segment.upcoming {
      background: var(--gray-300);
      color: var(--gray-600);
    }

    .project-analytics-milestone-bar {
      max-width: 280px;
      margin-left: auto;
      margin-right: auto;
    }

    .project-analytics-milestone .project-breakdown-legend {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-sm);
      font-size: var(--text-xs);
      color: var(--gray-600);
      line-height: 1.4;
    }

    .project-analytics-milestone .legend-dot {
      width: 10px;
      height: 10px;
      border-radius: var(--radius-full);
      flex-shrink: 0;
    }

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

    .project-analytics-milestone .legend-dot.blue {
      background: var(--primary);
    }

    .project-analytics-milestone .legend-dot.gray {
      background: var(--gray-300);
    }

    .project-analytics-milestone .portfolio-distribution-bar {
      display: flex;
      width: 100%;
      height: 12px;
      border-radius: var(--radius-full);
      overflow: hidden;
      background: var(--gray-100);
    }

    .project-analytics-milestone .portfolio-distribution-seg {
      display: block;
      min-width: 2px;
      height: 100%;
    }

    .project-analytics-milestone .portfolio-distribution-seg.completed {
      background: var(--success);
    }

    .project-analytics-milestone .portfolio-distribution-seg.in-progress {
      background: var(--primary);
    }

    .project-analytics-milestone .portfolio-distribution-seg.upcoming {
      background: var(--gray-300);
    }

    .donut-chart-sm {
      width: 140px;
      height: 140px;
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto var(--space-md);
      position: relative;
    }

    .donut-chart-sm-inner {
      width: 95px;
      height: 95px;
      background: var(--white);
      border-radius: var(--radius-full);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }

    .donut-chart-sm-value {
      font-size: var(--text-lg);
      font-weight: 700;
      color: var(--gray-900);
      line-height: 1;
    }

    .donut-chart-sm-label {
      font-size: var(--text-xs);
      color: var(--gray-500);
      margin-top: 2px;
    }

    .chart-legend {
      display: flex;
      justify-content: center;
      gap: var(--space-md);
      flex-wrap: wrap;
    }

    .chart-legend-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: var(--text-xs);
      color: var(--gray-600);
    }

    .chart-legend-dot {
      width: 10px;
      height: 10px;
      border-radius: var(--radius-full);
      flex-shrink: 0;
    }

    .segmented-bar {
      display: flex;
      border-radius: var(--radius-md);
      overflow: hidden;
      margin: 0 auto var(--space-sm);
      max-width: 320px;
      height: 40px;
    }

    .segmented-bar-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--text-sm);
      font-weight: 600;
      border-right: 2px solid var(--white);
    }

    .segmented-bar-item:last-child {
      border-right: none;
    }

    .segmented-bar-label {
      font-size: var(--text-sm);
      color: var(--gray-600);
      margin-bottom: var(--space-md);
    }

    /* --- Responsive --- */
    @media (max-width: 900px) {
      .progress-hero {
        flex-direction: column;
        text-align: center;
      }

      .info-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 768px) {
      .client-header {
        padding: 0 var(--space-md);
      }

      .client-header-center {
        display: none;
      }

      .client-nav {
        padding: 0 var(--space-md);
        overflow-x: auto;
      }

      .client-main {
        padding: var(--space-md);
      }

      .user-info {
        display: none;
      }

      .page-header-bar {
        flex-direction: column;
        align-items: flex-start;
      }

      .donut-large {
        width: 160px;
        height: 160px;
      }

      .donut-large-inner {
        width: 110px;
        height: 110px;
      }

      .donut-large-value {
        font-size: 2rem;
      }

      .charts-row {
        grid-template-columns: 1fr;
      }
    }
  


/* ========================================
   Page: documents.html
   ======================================== */

    /* ========================================
       Documents - Client Portal
       ======================================== */
    body {
      background-color: var(--gray-50);
    }

    /* --- Client Header --- */
    .client-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 var(--space-xl);
      height: var(--header-height);
      background: var(--white);
      border-bottom: 1px solid var(--gray-200);
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .client-header-left {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
    }

    .client-logo-icon {
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, #6366f1, #4f46e5);
      border-radius: var(--radius-lg);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-weight: 700;
      font-size: var(--text-sm);
      letter-spacing: 0.5px;
      flex-shrink: 0;
    }

    .client-company-name {
      font-size: var(--text-lg);
      font-weight: 600;
      color: var(--gray-900);
    }

    .client-header-center {
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--gray-500);
      text-transform: uppercase;
      letter-spacing: 1.5px;
    }

    .client-header-right {
      display: flex;
      align-items: center;
      gap: var(--space-md);
    }

    .notification-btn {
      position: relative;
      background: none;
      border: none;
      cursor: pointer;
      padding: var(--space-sm);
      color: var(--gray-500);
      border-radius: var(--radius-md);
      transition: all var(--transition-fast);
    }

    .notification-btn:hover {
      background: var(--gray-100);
      color: var(--gray-700);
    }

    .notification-btn svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .notif-dot {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 8px;
      height: 8px;
      background: var(--danger);
      border-radius: var(--radius-full);
      border: 2px solid var(--white);
    }

    .user-menu {
      position: relative;
    }

    .user-menu-trigger {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: 4px var(--space-sm);
      background: none;
      border: 1px solid transparent;
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: all var(--transition-fast);
    }

    .user-menu-trigger:hover {
      background: var(--gray-50);
      border-color: var(--gray-200);
    }

    .user-avatar {
      width: 36px;
      height: 36px;
      background: linear-gradient(135deg, #818cf8, #6366f1);
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-weight: 600;
      font-size: var(--text-sm);
      flex-shrink: 0;
    }

    .user-info {
      text-align: left;
    }

    .user-info-name {
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--gray-800);
      line-height: 1.2;
    }

    .user-info-role {
      font-size: var(--text-xs);
      color: var(--gray-500);
      line-height: 1.2;
    }

    .user-menu-trigger .chevron-icon {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: var(--gray-400);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform var(--transition-fast);
    }

    .user-menu-trigger.active .chevron-icon {
      transform: rotate(180deg);
    }

    .user-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: 200px;
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      padding: var(--space-xs) 0;
      display: none;
      z-index: 200;
    }

    .user-dropdown.open {
      display: block;
    }

    .user-dropdown a {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-sm) var(--space-md);
      font-size: var(--text-sm);
      color: var(--gray-700);
      border-radius: var(--radius-md);
      transition: background var(--transition-fast);
      text-decoration: none;
      margin: 0 var(--space-xs);
    }

    .user-dropdown a:hover {
      background: var(--gray-50);
    }

    .user-dropdown a svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      color: var(--gray-400);
    }

    .user-dropdown .dropdown-divider {
      height: 1px;
      background: var(--gray-100);
      margin: var(--space-xs) 0;
    }

    .user-dropdown a.logout-link {
      color: var(--danger);
    }

    .user-dropdown a.logout-link svg {
      color: var(--danger);
    }

    /* --- Top Navigation Tabs --- */
    .client-nav {
      background: var(--white);
      border-bottom: 1px solid var(--gray-200);
      padding: 0 var(--space-xl);
    }

    .client-nav-tabs {
      display: flex;
      gap: 0;
      list-style: none;
      max-width: 1200px;
      margin: 0 auto;
    }

    .client-nav-tabs li a {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-md) var(--space-lg);
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--gray-500);
      text-decoration: none;
      border-bottom: 2px solid transparent;
      transition: all var(--transition-fast);
      white-space: nowrap;
    }

    .client-nav-tabs li a:hover {
      color: var(--gray-700);
    }

    .client-nav-tabs li a.active {
      color: var(--primary);
      border-bottom-color: var(--primary);
    }

    .client-nav-tabs li a svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* --- Main Content --- */
    .client-main {
      max-width: 1200px;
      margin: 0 auto;
      padding: var(--space-xl);
    }

    /* --- Page Header --- */
    .page-title-section {
      margin-bottom: var(--space-xl);
    }

    .page-title-section h1 {
      font-size: var(--text-2xl);
      font-weight: 700;
      color: var(--gray-900);
      margin-bottom: 4px;
    }

    .page-title-section p {
      font-size: var(--text-sm);
      color: var(--gray-500);
      margin-bottom: 0;
    }

    /* --- Filters --- */
    .filters-bar {
      display: flex;
      align-items: center;
      gap: var(--space-md);
      margin-bottom: var(--space-lg);
      flex-wrap: wrap;
    }

    .filter-select {
      padding: 8px 36px 8px 14px;
      font-size: var(--text-sm);
      color: var(--gray-700);
      background: var(--white);
      border: 1.5px solid var(--gray-300);
      border-radius: var(--radius-md);
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8.825a.7.7 0 0 1-.5-.208L1.763 4.88a.7.7 0 1 1 .987-.988L6 7.142l3.25-3.25a.7.7 0 1 1 .988.988L6.5 8.617a.7.7 0 0 1-.5.208Z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      cursor: pointer;
      transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    .filter-select:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(0, 89, 131, 0.15);
    }

    .search-input-wrap {
      position: relative;
      flex: 1;
      min-width: 200px;
      max-width: 400px;
    }

    .search-input-wrap .search-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      fill: none;
      stroke: var(--gray-400);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none;
    }

    .search-input-wrap input {
      width: 100%;
      padding: 8px 14px 8px 40px;
      font-size: var(--text-sm);
      color: var(--gray-800);
      background: var(--white);
      border: 1.5px solid var(--gray-300);
      border-radius: var(--radius-md);
      transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    .search-input-wrap input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(0, 89, 131, 0.15);
    }

    .search-input-wrap input::placeholder {
      color: var(--gray-400);
    }

    /* --- Documents Table Card --- */
    .docs-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
    }

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

    .docs-table thead th {
      text-align: left;
      font-size: var(--text-xs);
      font-weight: 600;
      color: var(--gray-500);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: var(--space-sm) var(--space-lg);
      border-bottom: 1px solid var(--gray-200);
      background: var(--gray-50);
    }

    .docs-table tbody td {
      padding: var(--space-sm) var(--space-lg);
      font-size: var(--text-sm);
      color: var(--gray-700);
      border-bottom: 1px solid var(--gray-100);
      vertical-align: middle;
    }

    .docs-table tbody tr:last-child td {
      border-bottom: none;
    }

    .docs-table tbody tr:hover {
      background: var(--gray-50);
    }

    .doc-name-cell {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      font-weight: 500;
    }

    .file-icon {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .file-icon.pdf {
      background: #fef2f2;
      color: #dc2626;
    }

    .file-icon.zip {
      background: #fefce8;
      color: #ca8a04;
    }

    .file-icon.img {
      background: #f0fdf4;
      color: #16a34a;
    }

    .file-icon.chart {
      background: #eff6ff;
      color: #2563eb;
    }

    .file-icon svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .project-tag {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      font-size: var(--text-xs);
      font-weight: 500;
      border-radius: var(--radius-full);
      white-space: nowrap;
    }

    .project-tag.alpha {
      background: var(--primary-50);
      color: var(--primary);
    }

    .project-tag.crm {
      background: var(--info-light);
      color: var(--info-dark);
    }

    .download-btn {
      display: inline-flex;
      align-items: center;
      gap: var(--space-xs);
      padding: 6px 14px;
      font-size: var(--text-xs);
      font-weight: 500;
      color: var(--primary);
      background: var(--primary-50);
      border: none;
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: all var(--transition-fast);
    }

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

    .download-btn svg {
      width: 14px;
      height: 14px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* --- Pagination --- */
    .pagination-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-md) var(--space-lg);
      background: var(--gray-50);
      border-top: 1px solid var(--gray-200);
    }

    .pagination-info {
      font-size: var(--text-sm);
      color: var(--gray-500);
    }

    /* --- Client Footer --- */
    .client-footer {
      text-align: center;
      padding: var(--space-xl) var(--space-md);
      border-top: 1px solid var(--gray-200);
      margin-top: var(--space-xl);
    }

    .client-footer p {
      font-size: var(--text-sm);
      color: var(--gray-400);
      margin-bottom: 0;
    }

    /* --- Responsive --- */
    @media (max-width: 768px) {
      .client-header {
        padding: 0 var(--space-md);
      }

      .client-header-center {
        display: none;
      }

      .client-nav {
        padding: 0 var(--space-md);
        overflow-x: auto;
      }

      .client-main {
        padding: var(--space-md);
      }

      .user-info {
        display: none;
      }

      .filters-bar {
        flex-direction: column;
        align-items: stretch;
      }

      .search-input-wrap {
        max-width: 100%;
      }

      .docs-table thead th,
      .docs-table tbody td {
        padding: var(--space-sm) var(--space-md);
      }

      .docs-table thead th:nth-child(3),
      .docs-table tbody td:nth-child(3) {
        display: none;
      }
    }
  


/* ========================================
   Page: messages.html
   ======================================== */

    /* ========================================
       Messages - Client Portal
       ======================================== */
    body {
      background-color: var(--gray-50);
    }

    /* --- Client Header --- */
    .client-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 var(--space-xl);
      height: var(--header-height);
      background: var(--white);
      border-bottom: 1px solid var(--gray-200);
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .client-header-left {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
    }

    .client-logo-icon {
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, #6366f1, #4f46e5);
      border-radius: var(--radius-lg);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-weight: 700;
      font-size: var(--text-sm);
      letter-spacing: 0.5px;
      flex-shrink: 0;
    }

    .client-company-name {
      font-size: var(--text-lg);
      font-weight: 600;
      color: var(--gray-900);
    }

    .client-header-center {
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--gray-500);
      text-transform: uppercase;
      letter-spacing: 1.5px;
    }

    .client-header-right {
      display: flex;
      align-items: center;
      gap: var(--space-md);
    }

    .notification-btn {
      position: relative;
      background: none;
      border: none;
      cursor: pointer;
      padding: var(--space-sm);
      color: var(--gray-500);
      border-radius: var(--radius-md);
      transition: all var(--transition-fast);
    }

    .notification-btn:hover {
      background: var(--gray-100);
      color: var(--gray-700);
    }

    .notification-btn svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .notif-dot {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 8px;
      height: 8px;
      background: var(--danger);
      border-radius: var(--radius-full);
      border: 2px solid var(--white);
    }

    .user-menu {
      position: relative;
    }

    .user-menu-trigger {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: 4px var(--space-sm);
      background: none;
      border: 1px solid transparent;
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: all var(--transition-fast);
    }

    .user-menu-trigger:hover {
      background: var(--gray-50);
      border-color: var(--gray-200);
    }

    .user-avatar {
      width: 36px;
      height: 36px;
      background: linear-gradient(135deg, #818cf8, #6366f1);
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-weight: 600;
      font-size: var(--text-sm);
      flex-shrink: 0;
    }

    .user-info {
      text-align: left;
    }

    .user-info-name {
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--gray-800);
      line-height: 1.2;
    }

    .user-info-role {
      font-size: var(--text-xs);
      color: var(--gray-500);
      line-height: 1.2;
    }

    .user-menu-trigger .chevron-icon {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: var(--gray-400);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform var(--transition-fast);
    }

    .user-menu-trigger.active .chevron-icon {
      transform: rotate(180deg);
    }

    .user-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: 200px;
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      padding: var(--space-xs) 0;
      display: none;
      z-index: 200;
    }

    .user-dropdown.open {
      display: block;
    }

    .user-dropdown a {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-sm) var(--space-md);
      font-size: var(--text-sm);
      color: var(--gray-700);
      border-radius: var(--radius-md);
      transition: background var(--transition-fast);
      text-decoration: none;
      margin: 0 var(--space-xs);
    }

    .user-dropdown a:hover {
      background: var(--gray-50);
    }

    .user-dropdown a svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      color: var(--gray-400);
    }

    .user-dropdown .dropdown-divider {
      height: 1px;
      background: var(--gray-100);
      margin: var(--space-xs) 0;
    }

    .user-dropdown a.logout-link {
      color: var(--danger);
    }

    .user-dropdown a.logout-link svg {
      color: var(--danger);
    }

    /* --- Top Navigation Tabs --- */
    .client-nav {
      background: var(--white);
      border-bottom: 1px solid var(--gray-200);
      padding: 0 var(--space-xl);
    }

    .client-nav-tabs {
      display: flex;
      gap: 0;
      list-style: none;
      max-width: 1200px;
      margin: 0 auto;
    }

    .client-nav-tabs li a {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-md) var(--space-lg);
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--gray-500);
      text-decoration: none;
      border-bottom: 2px solid transparent;
      transition: all var(--transition-fast);
      white-space: nowrap;
    }

    .client-nav-tabs li a:hover {
      color: var(--gray-700);
    }

    .client-nav-tabs li a.active {
      color: var(--primary);
      border-bottom-color: var(--primary);
    }

    .client-nav-tabs li a svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* --- Main Content --- */
    .client-main {
      max-width: 1200px;
      margin: 0 auto;
      padding: var(--space-xl);
    }

    /* --- Page Header --- */
    .page-title-section {
      margin-bottom: var(--space-xl);
    }

    .page-title-section h1 {
      font-size: var(--text-2xl);
      font-weight: 700;
      color: var(--gray-900);
      margin-bottom: 4px;
    }

    .page-title-section p {
      font-size: var(--text-sm);
      color: var(--gray-500);
      margin-bottom: 0;
    }

    /* --- Messages Layout --- */
    .messages-layout {
      display: grid;
      grid-template-columns: 340px 1fr;
      gap: 0;
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-sm);
      min-height: 600px;
      overflow: hidden;
    }

    /* --- Thread List --- */
    .thread-list {
      border-right: 1px solid var(--gray-200);
      overflow-y: auto;
    }

    .thread-list-header {
      padding: var(--space-md) var(--space-lg);
      border-bottom: 1px solid var(--gray-200);
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--gray-700);
    }

    .thread-item {
      display: flex;
      gap: var(--space-sm);
      padding: var(--space-md) var(--space-lg);
      border-bottom: 1px solid var(--gray-100);
      cursor: pointer;
      transition: background var(--transition-fast);
    }

    .thread-item:hover {
      background: var(--gray-50);
    }

    .thread-item.active {
      background: var(--primary-50);
      border-left: 3px solid var(--primary);
      padding-left: calc(var(--space-lg) - 3px);
    }

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

    .thread-dot {
      width: 10px;
      height: 10px;
      border-radius: var(--radius-full);
      background: var(--primary);
      flex-shrink: 0;
      margin-top: 5px;
    }

    .thread-item:not(.active) .thread-dot {
      background: var(--gray-300);
    }

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

    .thread-title {
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--gray-800);
      margin-bottom: 2px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .thread-item.active .thread-title {
      color: var(--primary);
    }

    .thread-preview {
      font-size: var(--text-xs);
      color: var(--gray-500);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 0;
    }

    .thread-date {
      font-size: var(--text-xs);
      color: var(--gray-400);
      white-space: nowrap;
      flex-shrink: 0;
    }

    /* --- Thread Detail --- */
    .thread-detail {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .thread-detail-header {
      padding: var(--space-md) var(--space-lg);
      border-bottom: 1px solid var(--gray-200);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .thread-detail-title {
      font-size: var(--text-base);
      font-weight: 600;
      color: var(--gray-900);
    }

    .thread-detail-date {
      font-size: var(--text-xs);
      color: var(--gray-500);
    }

    /* --- Messages Area --- */
    .messages-area {
      flex: 1;
      overflow-y: auto;
      padding: var(--space-lg);
      display: flex;
      flex-direction: column;
      gap: var(--space-lg);
    }

    .message-bubble {
      display: flex;
      gap: var(--space-sm);
      max-width: 85%;
    }

    .message-bubble.from-team {
      align-self: flex-start;
    }

    .message-bubble.from-client {
      align-self: flex-end;
      flex-direction: row-reverse;
    }

    .message-avatar {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: var(--text-xs);
      flex-shrink: 0;
    }

    .message-avatar.team {
      background: linear-gradient(135deg, var(--success), #059669);
      color: var(--white);
    }

    .message-avatar.client {
      background: linear-gradient(135deg, #818cf8, #6366f1);
      color: var(--white);
    }

    .message-content {
      flex: 1;
    }

    .message-body {
      padding: var(--space-md);
      border-radius: var(--radius-lg);
      font-size: var(--text-sm);
      color: var(--gray-700);
      line-height: 1.6;
    }

    .message-bubble.from-team .message-body {
      background: var(--gray-100);
      border-top-left-radius: var(--radius-sm);
    }

    .message-bubble.from-client .message-body {
      background: var(--primary-50);
      color: var(--gray-800);
      border-top-right-radius: var(--radius-sm);
    }

    .message-body p {
      margin-bottom: var(--space-sm);
      color: inherit;
    }

    .message-body p:last-child {
      margin-bottom: 0;
    }

    .message-body ul {
      margin-bottom: var(--space-sm);
      padding-left: var(--space-lg);
    }

    .message-body ul li {
      margin-bottom: 4px;
      list-style: disc;
      color: inherit;
    }

    .message-meta {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      margin-top: 4px;
      font-size: var(--text-xs);
      color: var(--gray-400);
    }

    .message-bubble.from-client .message-meta {
      justify-content: flex-end;
    }

    .message-sender {
      font-weight: 600;
      color: var(--gray-600);
    }

    /* --- Reply Box --- */
    .reply-box {
      padding: var(--space-md) var(--space-lg);
      border-top: 1px solid var(--gray-200);
      background: var(--gray-50);
    }

    .reply-input-wrap {
      display: flex;
      gap: var(--space-sm);
      align-items: flex-end;
    }

    .reply-input-wrap textarea {
      flex: 1;
      padding: var(--space-sm) var(--space-md);
      font-size: var(--text-sm);
      font-family: inherit;
      color: var(--gray-800);
      background: var(--white);
      border: 1.5px solid var(--gray-300);
      border-radius: var(--radius-lg);
      resize: none;
      min-height: 44px;
      max-height: 120px;
      transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    .reply-input-wrap textarea:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(0, 89, 131, 0.15);
    }

    .reply-input-wrap textarea::placeholder {
      color: var(--gray-400);
    }

    .reply-send-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      background: var(--primary);
      color: var(--white);
      border: none;
      border-radius: var(--radius-lg);
      cursor: pointer;
      transition: background var(--transition-fast);
      flex-shrink: 0;
    }

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

    .reply-send-btn svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .reply-send-spinner {
      display: block;
      width: 20px;
      height: 20px;
      border: 2px solid rgba(255,255,255,0.3);
      border-top-color: currentColor;
      border-radius: 50%;
      animation: reply-spin 0.7s linear infinite;
    }

    .reply-send-btn.sending {
      cursor: wait;
    }

    @keyframes reply-spin {
      to { transform: rotate(360deg); }
    }

    /* --- Client Footer --- */
    .client-footer {
      text-align: center;
      padding: var(--space-xl) var(--space-md);
      border-top: 1px solid var(--gray-200);
      margin-top: var(--space-xl);
    }

    .client-footer p {
      font-size: var(--text-sm);
      color: var(--gray-400);
      margin-bottom: 0;
    }

    /* --- Responsive --- */
    @media (max-width: 900px) {
      .messages-layout {
        grid-template-columns: 1fr;
      }

      .thread-list {
        border-right: none;
        border-bottom: 1px solid var(--gray-200);
        max-height: 200px;
      }
    }

    @media (max-width: 768px) {
      .client-header {
        padding: 0 var(--space-md);
      }

      .client-header-center {
        display: none;
      }

      .client-nav {
        padding: 0 var(--space-md);
        overflow-x: auto;
      }

      .client-main {
        padding: var(--space-md);
      }

      .user-info {
        display: none;
      }

      .message-bubble {
        max-width: 95%;
      }
    }
  


/* ========================================
   Page: support.html
   ======================================== */

    /* ========================================
       Support & Feedback - Client Portal
       ======================================== */
    body {
      background-color: var(--gray-50);
    }

    /* --- Client Header --- */
    .client-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 var(--space-xl);
      height: var(--header-height);
      background: var(--white);
      border-bottom: 1px solid var(--gray-200);
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .client-header-left {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
    }

    .client-logo-icon {
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, #6366f1, #4f46e5);
      border-radius: var(--radius-lg);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-weight: 700;
      font-size: var(--text-sm);
      letter-spacing: 0.5px;
      flex-shrink: 0;
    }

    .client-company-name {
      font-size: var(--text-lg);
      font-weight: 600;
      color: var(--gray-900);
    }

    .client-header-center {
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--gray-500);
      text-transform: uppercase;
      letter-spacing: 1.5px;
    }

    .client-header-right {
      display: flex;
      align-items: center;
      gap: var(--space-md);
    }

    .notification-btn {
      position: relative;
      background: none;
      border: none;
      cursor: pointer;
      padding: var(--space-sm);
      color: var(--gray-500);
      border-radius: var(--radius-md);
      transition: all var(--transition-fast);
    }

    .notification-btn:hover {
      background: var(--gray-100);
      color: var(--gray-700);
    }

    .notification-btn svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .notif-dot {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 8px;
      height: 8px;
      background: var(--danger);
      border-radius: var(--radius-full);
      border: 2px solid var(--white);
    }

    .user-menu {
      position: relative;
    }

    .user-menu-trigger {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: 4px var(--space-sm);
      background: none;
      border: 1px solid transparent;
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: all var(--transition-fast);
    }

    .user-menu-trigger:hover {
      background: var(--gray-50);
      border-color: var(--gray-200);
    }

    .user-avatar {
      width: 36px;
      height: 36px;
      background: linear-gradient(135deg, #818cf8, #6366f1);
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-weight: 600;
      font-size: var(--text-sm);
      flex-shrink: 0;
    }

    .user-info {
      text-align: left;
    }

    .user-info-name {
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--gray-800);
      line-height: 1.2;
    }

    .user-info-role {
      font-size: var(--text-xs);
      color: var(--gray-500);
      line-height: 1.2;
    }

    .user-menu-trigger .chevron-icon {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: var(--gray-400);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform var(--transition-fast);
    }

    .user-menu-trigger.active .chevron-icon {
      transform: rotate(180deg);
    }

    .user-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: 200px;
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      padding: var(--space-xs) 0;
      display: none;
      z-index: 200;
    }

    .user-dropdown.open {
      display: block;
    }

    .user-dropdown a {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-sm) var(--space-md);
      font-size: var(--text-sm);
      color: var(--gray-700);
      border-radius: var(--radius-md);
      transition: background var(--transition-fast);
      text-decoration: none;
      margin: 0 var(--space-xs);
    }

    .user-dropdown a:hover {
      background: var(--gray-50);
    }

    .user-dropdown a svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      color: var(--gray-400);
    }

    .user-dropdown .dropdown-divider {
      height: 1px;
      background: var(--gray-100);
      margin: var(--space-xs) 0;
    }

    .user-dropdown a.logout-link {
      color: var(--danger);
    }

    .user-dropdown a.logout-link svg {
      color: var(--danger);
    }

    /* --- Top Navigation Tabs --- */
    .client-nav {
      background: var(--white);
      border-bottom: 1px solid var(--gray-200);
      padding: 0 var(--space-xl);
    }

    .client-nav-tabs {
      display: flex;
      gap: 0;
      list-style: none;
      max-width: 1200px;
      margin: 0 auto;
    }

    .client-nav-tabs li a {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-md) var(--space-lg);
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--gray-500);
      text-decoration: none;
      border-bottom: 2px solid transparent;
      transition: all var(--transition-fast);
      white-space: nowrap;
    }

    .client-nav-tabs li a:hover {
      color: var(--gray-700);
    }

    .client-nav-tabs li a.active {
      color: var(--primary);
      border-bottom-color: var(--primary);
    }

    .client-nav-tabs li a svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* --- Main Content --- */
    .client-main {
      max-width: 1200px;
      margin: 0 auto;
      padding: var(--space-xl);
    }

    /* --- Page Header --- */
    .page-title-section {
      margin-bottom: var(--space-xl);
    }

    .page-title-section h1 {
      font-size: var(--text-2xl);
      font-weight: 700;
      color: var(--gray-900);
      margin-bottom: 4px;
    }

    .page-title-section p {
      font-size: var(--text-sm);
      color: var(--gray-500);
      margin-bottom: 0;
    }

    /* --- Content Grid --- */
    .support-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-xl);
      margin-bottom: var(--space-xl);
    }

    /* --- Section Card --- */
    .section-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-xl);
      padding: var(--space-xl);
      box-shadow: var(--shadow-sm);
    }

    .section-card-title {
      font-size: var(--text-lg);
      font-weight: 600;
      color: var(--gray-900);
      margin-bottom: var(--space-lg);
    }

    /* --- Submit Request Form --- */
    .support-form .form-group {
      margin-bottom: var(--space-lg);
    }

    .support-form .form-label {
      display: block;
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--gray-700);
      margin-bottom: var(--space-xs);
    }

    .support-form .form-label .required {
      color: var(--danger);
      margin-left: 2px;
    }

    .support-form .form-input {
      display: block;
      width: 100%;
      padding: 10px 14px;
      font-size: var(--text-sm);
      color: var(--gray-800);
      background: var(--white);
      border: 1.5px solid var(--gray-300);
      border-radius: var(--radius-md);
      transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    .support-form .form-input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(0, 89, 131, 0.15);
    }

    .support-form .form-input::placeholder {
      color: var(--gray-400);
    }

    .support-form .form-select {
      display: block;
      width: 100%;
      padding: 10px 36px 10px 14px;
      font-size: var(--text-sm);
      color: var(--gray-800);
      background: var(--white);
      border: 1.5px solid var(--gray-300);
      border-radius: var(--radius-md);
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8.825a.7.7 0 0 1-.5-.208L1.763 4.88a.7.7 0 1 1 .987-.988L6 7.142l3.25-3.25a.7.7 0 1 1 .988.988L6.5 8.617a.7.7 0 0 1-.5.208Z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      cursor: pointer;
      transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    .support-form .form-select:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(0, 89, 131, 0.15);
    }

    .support-form .form-textarea {
      display: block;
      width: 100%;
      padding: 10px 14px;
      font-size: var(--text-sm);
      font-family: inherit;
      color: var(--gray-800);
      background: var(--white);
      border: 1.5px solid var(--gray-300);
      border-radius: var(--radius-md);
      resize: vertical;
      min-height: 120px;
      transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    .support-form .form-textarea:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(0, 89, 131, 0.15);
    }

    .support-form .form-textarea::placeholder {
      color: var(--gray-400);
    }

    .support-form .form-input.input-error,
    .support-form .form-textarea.input-error {
      border-color: var(--color-error, #ef4444);
    }
    .support-form .form-input.input-error:focus,
    .support-form .form-textarea.input-error:focus {
      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
    }
    .support-form .form-error {
      font-size: var(--font-size-xs);
      color: var(--color-error, #ef4444);
      margin-top: 4px;
    }

    /* --- File Upload Area --- */
    .file-upload-area {
      border: 2px dashed var(--gray-300);
      border-radius: var(--radius-lg);
      padding: var(--space-xl) var(--space-md);
      text-align: center;
      cursor: pointer;
      transition: all var(--transition-fast);
      position: relative;
    }

    .file-upload-area:hover {
      border-color: var(--primary);
      background: var(--primary-50);
    }

    .file-upload-area.dragover {
      border-color: var(--primary);
      background: var(--primary-50);
    }

    .file-upload-area input[type="file"],
    .file-upload-area .file-input-overlay {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0.01;
      cursor: pointer;
      z-index: 10;
    }

    .file-upload-area .file-upload-icon,
    .file-upload-area .file-upload-text,
    .file-upload-area .file-upload-hint {
      pointer-events: none;
    }

    .file-upload-icon {
      width: 40px;
      height: 40px;
      margin: 0 auto var(--space-sm);
      color: var(--gray-400);
    }

    .file-upload-icon svg {
      width: 40px;
      height: 40px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .file-upload-text {
      font-size: var(--text-sm);
      color: var(--gray-500);
      margin-bottom: 0;
    }

    .file-upload-text span {
      color: var(--primary);
      font-weight: 500;
    }

    .file-upload-hint {
      font-size: var(--text-xs);
      color: var(--gray-400);
      margin-top: var(--space-xs);
      margin-bottom: 0;
    }

    /* --- File Upload (same as task create) --- */
    .file-upload {
      border: 2px dashed var(--gray-300);
      border-radius: var(--radius-md);
      padding: var(--space-lg);
      text-align: center;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
      color: var(--gray-500);
      font-size: var(--text-sm);
    }
    .file-upload:hover {
      border-color: var(--primary);
      background: var(--primary-50);
    }
    .file-upload.file-upload-dragover {
      border-color: var(--primary);
      background: var(--primary-50);
    }
    .file-upload svg {
      width: 40px;
      height: 40px;
      margin: 0 auto 8px;
      display: block;
      color: var(--gray-400);
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .file-upload p {
      margin: 4px 0;
    }
    .file-upload span {
      color: var(--primary);
      font-weight: 500;
      cursor: pointer;
    }
    .btn.btn-sm {
      font-size: var(--text-xs);
      padding: 4px 10px;
    }
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* --- Contact Info Card --- */
    .contact-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-xl);
      padding: var(--space-xl);
      box-shadow: var(--shadow-sm);
    }

    .contact-card-title {
      font-size: var(--text-lg);
      font-weight: 600;
      color: var(--gray-900);
      margin-bottom: var(--space-xs);
    }

    .contact-card-subtitle {
      font-size: var(--text-sm);
      color: var(--gray-500);
      margin-bottom: var(--space-lg);
    }

    .contact-item {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-sm) 0;
      font-size: var(--text-sm);
      color: var(--gray-700);
    }

    .contact-item svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: var(--gray-400);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }

    .contact-item-label {
      color: var(--gray-500);
      min-width: 130px;
    }

    .contact-item-value {
      font-weight: 500;
      color: var(--gray-800);
    }

    /* --- Previous Requests Table --- */
    .requests-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
    }

    .requests-card-header {
      padding: var(--space-lg) var(--space-xl);
      border-bottom: 1px solid var(--gray-200);
    }

    .requests-card-header h2 {
      font-size: var(--text-lg);
      font-weight: 600;
      color: var(--gray-900);
      margin-bottom: 0;
    }

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

    .requests-table thead th {
      text-align: left;
      font-size: var(--text-xs);
      font-weight: 600;
      color: var(--gray-500);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: var(--space-sm) var(--space-lg);
      border-bottom: 1px solid var(--gray-200);
      background: var(--gray-50);
    }

    .requests-table tbody td {
      padding: var(--space-sm) var(--space-lg);
      font-size: var(--text-sm);
      color: var(--gray-700);
      border-bottom: 1px solid var(--gray-100);
      vertical-align: middle;
    }

    .requests-table tbody tr:last-child td {
      border-bottom: none;
    }

    .requests-table tbody tr {
      cursor: pointer;
      transition: background var(--transition-fast);
    }

    .requests-table tbody tr:hover {
      background: var(--gray-50);
    }

    .request-id {
      font-weight: 600;
      color: var(--gray-400);
    }

    .request-type {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      font-size: var(--text-xs);
      font-weight: 500;
      border-radius: var(--radius-full);
      white-space: nowrap;
    }

    .request-type.feedback {
      background: var(--info-light);
      color: var(--info-dark);
    }

    .request-type.bug {
      background: var(--danger-light);
      color: var(--danger-dark);
    }

    .request-type.feature {
      background: #f0fdf4;
      color: #16a34a;
    }

    .request-type.question {
      background: var(--warning-light);
      color: var(--warning-dark);
    }

    .request-priority {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: var(--text-xs);
      font-weight: 500;
    }

    .request-priority .priority-dot {
      width: 8px;
      height: 8px;
      border-radius: var(--radius-full);
    }

    .request-priority .priority-dot.low {
      background: var(--success);
    }

    .request-priority .priority-dot.medium {
      background: var(--warning);
    }

    .request-priority .priority-dot.high {
      background: var(--danger);
    }

    .request-status {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: var(--text-xs);
      font-weight: 500;
    }

    .request-status.resolved {
      color: var(--success);
    }

    .request-status.in-progress {
      color: var(--info);
    }

    .request-status.under-review {
      color: var(--warning-dark);
    }

    .request-status svg {
      width: 14px;
      height: 14px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* --- Success Alert --- */
    .success-alert {
      display: none;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-md) var(--space-lg);
      background: var(--success-light);
      color: var(--success-dark);
      border: 1px solid #a7f3d0;
      border-radius: var(--radius-lg);
      font-size: var(--text-sm);
      margin-bottom: var(--space-lg);
      animation: slideUp var(--transition-base) ease-out;
    }

    .success-alert.show {
      display: flex;
    }

    .success-alert svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }

    /* --- Client Footer --- */
    .client-footer {
      text-align: center;
      padding: var(--space-xl) var(--space-md);
      border-top: 1px solid var(--gray-200);
      margin-top: var(--space-xl);
    }

    .client-footer p {
      font-size: var(--text-sm);
      color: var(--gray-400);
      margin-bottom: 0;
    }


    /* --- Input wrapper (password show/hide) --- */
    .input-wrapper {
      position: relative;
    }
    .input-wrapper .form-input {
      padding-right: 2.75rem;
    }
    .input-toggle-btn {
      position: absolute;
      right: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
      color: var(--color-gray-400, #9ca3af);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.15s ease;
      border-radius: 4px;
    }
    .input-toggle-btn:hover {
      color: var(--color-gray-600, #4b5563);
    }
    .input-toggle-btn svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* --- Projects Overview (Client Dashboard) --- */
    .projects-overview {
      margin-bottom: var(--spacing-8);
    }

    /* --- Hidden Deliverables (Project Detail) --- */
    .hidden-deliverables {
      display: none;
    }

    /* --- Thread Messages (Messages Page) --- */
    .thread-messages {
      display: flex;
      flex-direction: column;
      gap: var(--space-lg, 24px);
    }

    /* --- Responsive --- */
    @media (max-width: 900px) {
      .support-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 768px) {
      .client-header {
        padding: 0 var(--space-md);
      }

      .client-header-center {
        display: none;
      }

      .client-nav {
        padding: 0 var(--space-md);
        overflow-x: auto;
      }

      .client-main {
        padding: var(--space-md);
      }

      .user-info {
        display: none;
      }

      .requests-table thead th,
      .requests-table tbody td {
        padding: var(--space-sm) var(--space-md);
      }

      .requests-table thead th:nth-child(4),
      .requests-table tbody td:nth-child(4) {
        display: none;
      }
    }