/* =====================================================================
   AZK İB — Proses Təhlükəsizliyi Platforması · stillər

   Bloklar orijinal sənəddəki kaskad ardıcıllığı ilə saxlanılıb.
   Eyni seçicilər bir neçə blokda təkrarlanır — sıranı dəyişməyin.
   ===================================================================== */

/* ==================== 1. blok (orijinal sətir 16) ==================== */
* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      /* Winter Chill Palette */
      --winter-lightest: #B8E3E9;
      --winter-light: #93B1B5;
      --winter-medium: #4F7C82;
      --winter-dark: #0B2E33;

      /* Apple-style backgrounds - Light Mode with Winter Chill */
      --apple-bg-primary: #F4FAFB;
      --apple-bg-secondary: #FFFFFF;
      --apple-bg-tertiary: #EBF5F6;
      --apple-bg-elevated: #FFFFFF;

      /* Text colors - HIGH CONTRAST for readability */
      --apple-text-primary: #0B2E33;
      --apple-text-secondary: #3D5A5F;
      --apple-text-tertiary: #4F7C82;

      /* Accent colors - Winter Chill themed */
      --apple-blue: #4F7C82;
      --apple-green: #3A6B70;
      --apple-red: #C45C5C;
      --apple-orange: #D4884A;
      --apple-purple: #5E7B82;
      --apple-pink: #B86B7B;
      --apple-teal: #4F7C82;

      /* Status colors - vivid & accessible */
      --status-red: #DC3545;
      --status-red-bg: rgba(220, 53, 69, 0.10);
      --status-red-border: rgba(220, 53, 69, 0.25);
      --status-orange: #E67E22;
      --status-orange-bg: rgba(230, 126, 34, 0.10);
      --status-orange-border: rgba(230, 126, 34, 0.25);
      --status-green: #27AE60;
      --status-green-bg: rgba(39, 174, 96, 0.10);
      --status-green-border: rgba(39, 174, 96, 0.25);

      /* Clean shadows with winter tones */
      --apple-shadow-sm: 0 2px 8px rgba(11, 46, 51, 0.06);
      --apple-shadow-md: 0 8px 24px rgba(11, 46, 51, 0.10);
      --apple-shadow-lg: 0 16px 48px rgba(11, 46, 51, 0.14);
      --apple-shadow-xl: 0 24px 64px rgba(11, 46, 51, 0.18);
    }

    @keyframes slideInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes pulse-soft {
      0%, 100% {
        box-shadow: 0 0 0 0 rgba(79, 124, 130, 0.4);
      }
      50% {
        box-shadow: 0 0 0 8px rgba(79, 124, 130, 0);
      }
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
      margin: 0;
      padding: 0;
      background: linear-gradient(180deg, #F4FAFB 0%, #E5F2F4 50%, #F4FAFB 100%);
      background-attachment: fixed;
      color: var(--apple-text-primary);
      min-height: 100vh;
      position: relative;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* Lock body scroll when overlay is open - sərt həll */
    body.overlay-open {
      overflow: hidden !important;
      /* iOS/Safari və ya bəzi brauzerlərdə body scroll-u qalır - aşağıdakı tam həlldir */
      position: fixed;
      width: 100%;
      top: var(--scroll-lock-y, 0);
    }
    html.overlay-open-html {
      overflow: hidden !important;
    }

    body::before {
      display: none;
    }

    header {
      position: sticky;
      top: 0;
      z-index: 1000;
      padding: 0.9rem 2.5rem;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border-bottom: 1px solid rgba(79, 124, 130, 0.2);
      box-shadow: 0 2px 16px rgba(11, 46, 51, 0.08);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      animation: slideInUp 0.6s ease-out;
    }

    header::before {
      display: none;
    }

    h1 {
      margin: 0;
      font-size: 2rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--winter-dark);
    }

    /* Year Selector Styles - Compact version under title */
    .header-title-group {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.35rem;
    }

    .year-selector {
      display: flex;
      /* Increase spacing between year chips for better clarity */
      gap: 0.5rem;
      align-items: center;
      justify-content: flex-start;
    }

    .year-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      /* Larger padding to increase chip size */
      padding: 0.35rem 0.8rem;
      border-radius: 100px;
      background: rgba(79, 124, 130, 0.08);
      border: 1px solid rgba(79, 124, 130, 0.15);
      cursor: pointer;
      transition: all 0.2s ease;
      user-select: none;
    }

    .year-chip:hover {
      background: rgba(79, 124, 130, 0.15);
    }

    .year-chip.active {
      background: var(--winter-medium);
      border-color: var(--winter-dark);
      box-shadow: 0 1px 4px rgba(79, 124, 130, 0.25);
    }

    .year-chip.active .year-chip-text {
      color: #FFFFFF;
      font-weight: 600;
    }

    .year-chip-text {
      /* Increase font size for better readability */
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--winter-dark);
      letter-spacing: 0.02em;
    }

    /* Responsive */
    @media (max-width: 600px) {
      .year-selector {
        /* Slightly tighter spacing on small screens */
        gap: 0.4rem;
      }
      .year-chip {
        /* Reduce padding on small screens while staying larger than original */
        padding: 0.25rem 0.6rem;
      }
      .year-chip-text {
        /* Use a slightly smaller font size on small screens */
        font-size: 0.7rem;
      }
    }

    .subtitle {
      font-size: 0.9375rem;
      color: var(--apple-text-secondary);
      margin-top: 0.5rem;
      font-weight: 400;
      line-height: 1.6;
      letter-spacing: -0.01em;
    }

    .status-box {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0.75rem;
    }

    .live-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      background: rgba(79, 124, 130, 0.15);
      padding: 0.625rem 1.25rem;
      border-radius: 100px;
      border: 1px solid rgba(79, 124, 130, 0.3);
      font-size: 0.875rem;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: var(--winter-dark);
      box-shadow: var(--apple-shadow-sm);
      transition: all 0.3s ease;
    }

    .live-pill:hover {
      transform: translateY(-2px);
      box-shadow: var(--apple-shadow-md);
      background: rgba(79, 124, 130, 0.25);
    }

    .live-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--winter-medium);
      animation: pulse-soft 2s ease-in-out infinite;
      position: relative;
    }

    .live-dot::after {
      display: none;
    }

    .header-pills {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-wrap: wrap;
    }

    .activity-overview-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: linear-gradient(135deg, var(--winter-medium), var(--winter-dark));
      padding: 0.625rem 1.25rem;
      border-radius: 100px;
      border: 1px solid var(--winter-dark);
      font-size: 0.875rem;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: #FFFFFF;
      box-shadow: var(--apple-shadow-sm);
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .activity-overview-pill:hover {
      transform: translateY(-2px);
      box-shadow: var(--apple-shadow-md);
      background: linear-gradient(135deg, var(--winter-dark), #062428);
    }

    .activity-overview-pill svg {
      opacity: 0.9;
    }

    /* ============================================== */
    /* PERSONAL ACTIVITY OVERVIEW - FULL PAGE OVERLAY */
    /* Apple-Style Modern Design                       */
    /* ============================================== */

    .pao-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(180deg, #F4FAFB 0%, #E8F4F5 50%, #F4FAFB 100%);
      z-index: 9999;
      display: none;
      overflow-y: auto;
      animation: fadeInPao 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes fadeInPao {
      from {
        opacity: 0;
        transform: scale(0.98);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .pao-overlay.visible {
      display: block;
    }

    .pao-content {
      max-width: 95%;
      width: 100%;
      margin: 0 auto;
      padding: 2rem 1.5rem 4rem;
      animation: slideInUp 0.5s cubic-bezier(0.32, 0.72, 0, 1);
    }

    /* PAO Header */
    .pao-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 2rem;
      flex-wrap: wrap;
      gap: 1rem;
      padding-bottom: 1.5rem;
      border-bottom: 1px solid rgba(79, 124, 130, 0.08);
    }

    .pao-title-area {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .pao-title {
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--winter-dark);
      margin: 0;
      letter-spacing: -0.03em;
    }

    /* Department Menu Button (Hamburger) - Apple Style */
    .pao-dept-menu-btn {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(79, 124, 130, 0.12);
      border-radius: 12px;
      color: var(--winter-dark);
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      flex-shrink: 0;
      box-shadow: 0 2px 8px -2px rgba(11, 46, 51, 0.06);
    }

    .pao-dept-menu-btn:hover {
      background: rgba(255, 255, 255, 1);
      border-color: rgba(79, 124, 130, 0.2);
      transform: scale(1.05);
      box-shadow: 0 4px 16px -4px rgba(11, 46, 51, 0.1);
    }

    .pao-dept-menu-btn:active {
      transform: scale(0.98);
    }

    .pao-dept-menu-btn svg {
      width: 22px;
      height: 22px;
      transition: transform 0.3s ease;
    }

    .pao-dept-menu-btn:hover svg {
      transform: scale(1.1);
    }

    /* Department Sidebar - Apple Style */
    .dept-sidebar-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(11, 46, 51, 0.4);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 10000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .dept-sidebar-overlay.visible {
      opacity: 1;
      visibility: visible;
    }

    .dept-sidebar {
      position: absolute;
      top: 0;
      left: 0;
      width: 380px;
      max-width: 92%;
      height: 100%;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      box-shadow:
        0 0 0 1px rgba(79, 124, 130, 0.1),
        0 24px 80px -16px rgba(11, 46, 51, 0.25),
        0 8px 24px -8px rgba(11, 46, 51, 0.1);
      transform: translateX(-100%);
      transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
      display: flex;
      flex-direction: column;
      border-radius: 0 24px 24px 0;
      overflow: hidden;
    }

    .dept-sidebar-overlay.visible .dept-sidebar {
      transform: translateX(0);
    }

    .dept-sidebar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.5rem 1.75rem;
      background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(244, 250, 251, 0.8) 100%);
      border-bottom: 1px solid rgba(79, 124, 130, 0.08);
      position: relative;
    }

    .dept-sidebar-header::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 1.5rem;
      right: 1.5rem;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(79, 124, 130, 0.15), transparent);
    }

    .dept-sidebar-header h3 {
      margin: 0;
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--winter-dark);
      letter-spacing: -0.02em;
    }

    .dept-sidebar-close {
      width: 32px;
      height: 32px;
      border: none;
      background: rgba(79, 124, 130, 0.08);
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .dept-sidebar-close:hover {
      background: rgba(196, 92, 92, 0.12);
      transform: scale(1.08);
    }

    .dept-sidebar-close:hover svg {
      stroke: var(--apple-red);
    }

    .dept-sidebar-close svg {
      width: 16px;
      height: 16px;
      stroke: var(--winter-dark);
      transition: stroke 0.2s ease;
    }

    .dept-sidebar-list {
      flex: 1;
      overflow-y: auto;
      padding: 1rem;
    }

    .dept-sidebar-list::-webkit-scrollbar {
      width: 6px;
    }

    .dept-sidebar-list::-webkit-scrollbar-track {
      background: transparent;
    }

    .dept-sidebar-list::-webkit-scrollbar-thumb {
      background: rgba(79, 124, 130, 0.2);
      border-radius: 3px;
    }

    .dept-sidebar-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1.25rem;
      margin-bottom: 0.5rem;
      background: rgba(255, 255, 255, 0.6);
      border: 1px solid rgba(79, 124, 130, 0.08);
      border-radius: 14px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }

    .dept-sidebar-item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: linear-gradient(180deg, var(--winter-light), var(--winter-medium));
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .dept-sidebar-item:hover {
      background: rgba(79, 124, 130, 0.06);
      border-color: rgba(79, 124, 130, 0.15);
      transform: translateX(4px);
      box-shadow: 0 4px 12px -4px rgba(11, 46, 51, 0.08);
    }

    .dept-sidebar-item:hover::before {
      opacity: 1;
    }

    .dept-sidebar-item:active {
      transform: translateX(2px) scale(0.99);
    }

    .dept-sidebar-item-name {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--winter-dark);
      flex: 1;
      letter-spacing: -0.01em;
    }

    .dept-sidebar-item-arrow {
      width: 20px;
      height: 20px;
      color: var(--apple-text-tertiary);
      flex-shrink: 0;
      transition: all 0.3s ease;
    }

    .dept-sidebar-item:hover .dept-sidebar-item-arrow {
      color: var(--winter-medium);
      transform: translateX(4px);
    }

    /* Department Detail Overlay - Apple Style */
    .dept-detail-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(180deg, #F4FAFB 0%, #E8F4F5 50%, #F4FAFB 100%);
      z-index: 10001;
      opacity: 0;
      visibility: hidden;
      overflow-y: auto;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .dept-detail-overlay.visible {
      opacity: 1;
      visibility: visible;
    }

    .dept-detail-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem 2.5rem 4rem;
      animation: slideInUp 0.5s cubic-bezier(0.32, 0.72, 0, 1);
    }

    .dept-detail-header {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      margin-bottom: 2rem;
      padding-bottom: 1.5rem;
      border-bottom: 1px solid rgba(79, 124, 130, 0.1);
    }

    .dept-detail-back {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1.25rem;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(79, 124, 130, 0.15);
      border-radius: 12px;
      color: var(--winter-dark);
      font-size: 0.875rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 2px 8px -2px rgba(11, 46, 51, 0.06);
    }

    .dept-detail-back:hover {
      background: rgba(255, 255, 255, 1);
      border-color: rgba(79, 124, 130, 0.25);
      transform: translateX(-4px);
      box-shadow: 0 4px 16px -4px rgba(11, 46, 51, 0.1);
    }

    .dept-detail-back svg {
      width: 16px;
      height: 16px;
      transition: transform 0.3s ease;
    }

    .dept-detail-back:hover svg {
      transform: translateX(-2px);
    }

    .dept-detail-header h3 {
      margin: 0;
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--winter-dark);
      letter-spacing: -0.02em;
    }

    .dept-detail-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 1rem;
      margin-bottom: 2rem;
    }

    .dept-stat-card {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(79, 124, 130, 0.1);
      border-radius: 18px;
      padding: 1.5rem;
      text-align: center;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }

    .dept-stat-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--winter-light), var(--winter-medium));
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .dept-stat-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 32px -8px rgba(11, 46, 51, 0.12);
      border-color: rgba(79, 124, 130, 0.2);
    }

    .dept-stat-card:hover::before {
      opacity: 1;
    }

    .dept-stat-value {
      font-size: 2.25rem;
      font-weight: 700;
      color: var(--winter-dark);
      line-height: 1;
      letter-spacing: -0.02em;
    }

    .dept-stat-label {
      font-size: 0.8rem;
      color: var(--apple-text-secondary);
      margin-top: 0.5rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .dept-stat-card.overdue .dept-stat-value {
      color: var(--apple-red);
    }

    .dept-stat-card.overdue::before {
      background: linear-gradient(90deg, var(--apple-red), #d35555);
    }

    .dept-detail-persons {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(79, 124, 130, 0.1);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 4px 24px -8px rgba(11, 46, 51, 0.08);
    }

    .dept-detail-persons-header {
      padding: 1.25rem 1.5rem;
      background: linear-gradient(180deg, rgba(79, 124, 130, 0.04) 0%, transparent 100%);
      border-bottom: 1px solid rgba(79, 124, 130, 0.08);
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--winter-dark);
      letter-spacing: -0.01em;
    }

    .dept-person-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.25rem 1.5rem;
      border-bottom: 1px solid rgba(79, 124, 130, 0.06);
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
    }

    .dept-person-item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: linear-gradient(180deg, var(--winter-medium), var(--winter-dark));
      opacity: 0;
      transition: opacity 0.3s ease;
    }

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

    .dept-person-item:hover {
      background: rgba(79, 124, 130, 0.04);
      padding-left: 1.75rem;
    }

    .dept-person-item:hover::before {
      opacity: 1;
    }

    .dept-person-info {
      display: flex;
      align-items: center;
      gap: 1rem;
      flex: 1;
      min-width: 0;
    }

    .dept-person-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--winter-medium), var(--winter-dark));
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
      font-weight: 600;
      font-size: 0.9rem;
      flex-shrink: 0;
      box-shadow: 0 4px 12px -4px rgba(79, 124, 130, 0.3);
      transition: all 0.3s ease;
    }

    .dept-person-item:hover .dept-person-avatar {
      transform: scale(1.05);
      box-shadow: 0 6px 16px -4px rgba(79, 124, 130, 0.4);
    }

    .dept-person-name {
      font-size: 1rem;
      font-weight: 600;
      color: var(--winter-dark);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      letter-spacing: -0.01em;
    }

    .dept-person-stats {
      display: flex;
      gap: 1.75rem;
      align-items: center;
      flex-shrink: 0;
      margin-left: auto;
    }

    .dept-person-stat {
      text-align: center;
      min-width: 55px;
    }

    .dept-person-stat-value {
      font-size: 1.125rem;
      font-weight: 700;
      color: var(--winter-dark);
      line-height: 1;
    }

    .dept-person-stat-label {
      font-size: 0.7rem;
      color: var(--apple-text-secondary);
      margin-top: 0.25rem;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    .dept-person-stat.overdue .dept-person-stat-value {
      color: var(--apple-red);
    }

    .dept-person-arrow {
      width: 20px;
      height: 20px;
      color: var(--apple-text-tertiary);
      flex-shrink: 0;
      margin-left: 1rem;
      transition: all 0.3s ease;
    }

    .dept-person-item:hover .dept-person-arrow {
      color: var(--winter-medium);
      transform: translateX(4px);
    }

    @media (max-width: 600px) {
      .dept-sidebar {
        width: 100%;
        border-radius: 0;
      }

      .dept-detail-content {
        padding: 1.5rem 1rem 3rem;
      }

      .dept-detail-stats {
        grid-template-columns: repeat(2, 1fr);
      }

      .dept-person-stats {
        flex-wrap: wrap;
        gap: 0.75rem;
      }
    }

    .pao-back-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: linear-gradient(135deg, var(--winter-medium), var(--winter-dark));
      color: #FFFFFF;
      border: none;
      padding: 0.75rem 1.5rem;
      border-radius: 12px;
      font-size: 0.875rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 4px 16px -4px rgba(79, 124, 130, 0.4);
    }

    .pao-back-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px -4px rgba(79, 124, 130, 0.5);
    }

    .pao-back-btn:active {
      transform: translateY(0);
    }

    .pao-back-btn svg {
      width: 18px;
      height: 18px;
      transition: transform 0.3s ease;
    }

    .pao-back-btn:hover svg {
      transform: translateX(-3px);
    }

    /* Search Section - Apple Style */
    .pao-search-section {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(79, 124, 130, 0.1);
      border-radius: 20px;
      padding: 1.75rem;
      margin-bottom: 2rem;
      box-shadow: 0 4px 24px -8px rgba(11, 46, 51, 0.08);
      transition: all 0.3s ease;
    }

    .pao-search-section:hover {
      box-shadow: 0 8px 32px -8px rgba(11, 46, 51, 0.12);
    }

    .pao-search-label {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--winter-dark);
      margin-bottom: 1rem;
      display: block;
      letter-spacing: -0.01em;
    }

    .pao-search-container {
      display: flex;
      gap: 1rem;
      position: relative;
    }

    .pao-search-input-wrapper {
      flex: 1;
      position: relative;
    }

    .pao-search-input {
      width: 100%;
      padding: 1rem 1.5rem;
      padding-right: 3rem;
      border: 2px solid rgba(79, 124, 130, 0.15);
      border-radius: 14px;
      font-size: 1rem;
      font-family: inherit;
      color: var(--apple-text-primary);
      background: rgba(244, 250, 251, 0.5);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .pao-search-input:focus {
      outline: none;
      border-color: var(--winter-medium);
      background: #FFFFFF;
      box-shadow: 0 0 0 4px rgba(79, 124, 130, 0.12);
    }

    .pao-search-input::placeholder {
      color: var(--apple-text-tertiary);
    }

    .pao-search-clear {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(79, 124, 130, 0.08);
      border: none;
      border-radius: 50%;
      padding: 6px;
      cursor: pointer;
      color: var(--apple-text-tertiary);
      display: none;
      transition: all 0.2s ease;
    }

    .pao-search-clear.visible {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .pao-search-clear:hover {
      background: rgba(196, 92, 92, 0.12);
      color: var(--apple-red);
    }

    .pao-search-btn {
      padding: 1rem 2rem;
      background: linear-gradient(135deg, var(--winter-medium), var(--winter-dark));
      color: #FFFFFF;
      border: none;
      border-radius: 14px;
      font-size: 0.95rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: center;
      gap: 0.6rem;
      box-shadow: 0 4px 16px -4px rgba(79, 124, 130, 0.4);
    }

    .pao-search-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px -4px rgba(79, 124, 130, 0.5);
    }

    .pao-search-btn:active {
      transform: translateY(0);
    }

    .pao-search-btn svg {
      width: 20px;
      height: 20px;
    }

    /* Autocomplete Dropdown - Apple Style */
    .pao-autocomplete {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      right: 0;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(79, 124, 130, 0.12);
      border-radius: 16px;
      margin-top: 0;
      max-height: 360px;
      overflow-y: auto;
      box-shadow:
        0 0 0 1px rgba(79, 124, 130, 0.05),
        0 24px 64px -16px rgba(11, 46, 51, 0.2);
      z-index: 1000;
      display: none;
    }

    .pao-autocomplete.visible {
      display: block;
      animation: dropdownSlide 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    }

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

    .pao-autocomplete-item {
      padding: 1rem 1.25rem;
      cursor: pointer;
      transition: all 0.2s ease;
      border-bottom: 1px solid rgba(79, 124, 130, 0.06);
      display: flex;
      align-items: center;
      gap: 1rem;
    }

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

    .pao-autocomplete-item:hover {
      background: rgba(79, 124, 130, 0.06);
    }

    .pao-autocomplete-item.selected {
      background: rgba(79, 124, 130, 0.1);
    }

    .pao-autocomplete-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--winter-light), var(--winter-medium));
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
      font-weight: 600;
      font-size: 0.9rem;
      flex-shrink: 0;
      box-shadow: 0 3px 10px -3px rgba(79, 124, 130, 0.3);
    }

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

    .pao-autocomplete-name {
      font-weight: 600;
      color: var(--apple-text-primary);
      font-size: 0.95rem;
      letter-spacing: -0.01em;
    }

    .pao-autocomplete-dept {
      font-size: 0.8rem;
      color: var(--apple-text-secondary);
      margin-top: 0.2rem;
    }

    .pao-autocomplete-count {
      font-size: 0.75rem;
      color: var(--winter-medium);
      background: rgba(79, 124, 130, 0.1);
      padding: 0.35rem 0.75rem;
      border-radius: 20px;
      font-weight: 600;
    }

    /* Stats Cards - Apple Style */
    .pao-stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.25rem;
      margin-bottom: 2rem;
    }

    .pao-stat-card {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(79, 124, 130, 0.1);
      border-radius: 18px;
      padding: 1.5rem;
      text-align: center;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }

    .pao-stat-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--winter-light), var(--winter-medium));
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .pao-stat-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 32px -8px rgba(11, 46, 51, 0.12);
      border-color: rgba(79, 124, 130, 0.2);
    }

    .pao-stat-card:hover::before {
      opacity: 1;
    }

    .pao-stat-value {
      font-size: 2.5rem;
      font-weight: 700;
      color: var(--winter-dark);
      line-height: 1;
      margin-bottom: 0.5rem;
      letter-spacing: -0.03em;
    }

    .pao-stat-label {
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--apple-text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .pao-stat-card.ongoing {
      background: linear-gradient(135deg, rgba(79, 124, 130, 0.06), rgba(79, 124, 130, 0.02));
    }

    .pao-stat-card.ongoing .pao-stat-value {
      color: var(--winter-medium);
    }

    .pao-stat-card.ongoing::before {
      background: linear-gradient(90deg, var(--winter-medium), var(--winter-dark));
    }

    .pao-stat-card.completed {
      background: linear-gradient(135deg, rgba(58, 107, 112, 0.06), rgba(58, 107, 112, 0.02));
    }

    .pao-stat-card.completed .pao-stat-value {
      color: var(--apple-green);
    }

    .pao-stat-card.completed::before {
      background: linear-gradient(90deg, #4a9a8c, var(--apple-green));
    }

    .pao-stat-card.overdue {
      background: linear-gradient(135deg, rgba(196, 92, 92, 0.06), rgba(196, 92, 92, 0.02));
    }

    .pao-stat-card.overdue .pao-stat-value {
      color: var(--apple-red);
    }

    .pao-stat-card.overdue::before {
      background: linear-gradient(90deg, var(--apple-red), #d35555);
    }

    /* Back to list button - Apple Style */
    .pao-back-to-list-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.75rem 1.25rem;
      margin-bottom: 1.25rem;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(79, 124, 130, 0.15);
      border-radius: 12px;
      color: var(--winter-dark);
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 2px 8px -2px rgba(11, 46, 51, 0.06);
    }

    /* Hide back button when autocomplete is active */
    .pao-back-to-list-btn.hide-for-autocomplete {
      opacity: 0;
      pointer-events: none;
      transform: translateY(-10px);
    }

    .pao-back-to-list-btn:hover {
      background: rgba(255, 255, 255, 1);
      border-color: rgba(79, 124, 130, 0.25);
      transform: translateX(-4px);
      box-shadow: 0 4px 16px -4px rgba(11, 46, 51, 0.1);
    }

    .pao-back-to-list-btn svg {
      width: 18px;
      height: 18px;
      transition: transform 0.3s ease;
    }

    .pao-back-to-list-btn:hover svg {
      transform: translateX(-3px);
    }

    /* Person Info Header - Apple Style */
    .pao-person-header {
      display: flex;
      align-items: center;
      gap: 1.25rem;
      margin-bottom: 2rem;
      padding: 1.5rem 1.75rem;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(244, 250, 251, 0.9));
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(79, 124, 130, 0.1);
      border-radius: 18px;
      box-shadow: 0 4px 24px -8px rgba(11, 46, 51, 0.08);
    }

    .pao-person-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--winter-medium), var(--winter-dark));
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
      font-weight: 700;
      font-size: 1.5rem;
      flex-shrink: 0;
      box-shadow: 0 6px 20px -6px rgba(79, 124, 130, 0.4);
    }

    .pao-person-info h3 {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--winter-dark);
      margin: 0 0 0.35rem 0;
      letter-spacing: -0.02em;
    }

    .pao-person-info p {
      font-size: 0.95rem;
      color: var(--apple-text-secondary);
      margin: 0;
    }

    /* Table Container - Apple Style */
    .pao-table-container {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(79, 124, 130, 0.1);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 4px 24px -8px rgba(11, 46, 51, 0.08);
    }

    /* Table Filters - Apple Style */
    .pao-table-filters {
      display: flex;
      align-items: center;
      gap: 1.25rem;
      padding: 1.25rem 1.5rem;
      background: linear-gradient(180deg, rgba(79, 124, 130, 0.04) 0%, transparent 100%);
      border-bottom: 1px solid rgba(79, 124, 130, 0.1);
      flex-wrap: wrap;
    }

    .pao-filter-group {
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }

    .pao-filter-label {
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--apple-text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .pao-filter-select {
      padding: 0.6rem 2.25rem 0.6rem 1rem;
      border: 1px solid rgba(79, 124, 130, 0.15);
      border-radius: 10px;
      font-size: 0.875rem;
      font-family: inherit;
      font-weight: 500;
      color: var(--apple-text-primary);
      background: rgba(255, 255, 255, 0.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234F7C82' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.875rem center;
      cursor: pointer;
      transition: all 0.25s ease;
      appearance: none;
    }

    .pao-filter-select:hover {
      border-color: rgba(79, 124, 130, 0.25);
      box-shadow: 0 2px 8px -2px rgba(11, 46, 51, 0.06);
    }

    .pao-filter-select:focus {
      outline: none;
      border-color: var(--winter-medium);
      box-shadow: 0 0 0 3px rgba(79, 124, 130, 0.1);
    }

    .pao-results-count {
      margin-left: auto;
      font-size: 0.875rem;
      color: var(--apple-text-secondary);
      font-weight: 500;
    }

    .pao-results-count strong {
      color: var(--winter-dark);
      font-weight: 700;
    }

    /* Table - Apple Style */
    .pao-table-wrapper {
      overflow-x: auto;
    }

    .pao-table-wrapper::-webkit-scrollbar {
      height: 8px;
    }

    .pao-table-wrapper::-webkit-scrollbar-track {
      background: rgba(79, 124, 130, 0.04);
    }

    .pao-table-wrapper::-webkit-scrollbar-thumb {
      background: rgba(79, 124, 130, 0.2);
      border-radius: 4px;
    }

    .pao-table {
      width: 100%;
      min-width: 850px;
      border-collapse: collapse;
      font-size: 0.9rem;
    }

    .pao-table th {
      text-align: left;
      padding: 0.85rem 0.9rem;
      font-weight: 700;
      color: var(--winter-dark);
      background: rgba(79, 124, 130, 0.04);
      border-bottom: 2px solid rgba(79, 124, 130, 0.12);
      white-space: nowrap;
      cursor: pointer;
      transition: all 0.25s ease;
      user-select: none;
      letter-spacing: -0.01em;
      font-size: 0.88rem;
    }

    .pao-table th:hover {
      background: rgba(79, 124, 130, 0.08);
    }

    .pao-table th .sort-icon {
      margin-left: 0.4rem;
      opacity: 0.35;
      font-size: 0.75rem;
      transition: opacity 0.2s ease;
    }

    .pao-table th:hover .sort-icon {
      opacity: 0.6;
    }

    .pao-table th.sorted .sort-icon {
      opacity: 1;
    }

    .pao-table td {
      padding: 0.75rem 0.85rem;
      border-bottom: 1px solid rgba(79, 124, 130, 0.06);
      color: var(--apple-text-primary);
      vertical-align: top;
      font-size: 0.88rem;
    }

    .pao-table tr {
      transition: all 0.2s ease;
    }

    .pao-table tr:hover td {
      background: rgba(79, 124, 130, 0.03);
    }

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

    /* Category Badge - Apple Style */
    .pao-cat-badge {
      display: inline-flex;
      align-items: center;
      padding: 0.4rem 0.8rem;
      border-radius: 8px;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.1);
    }

    .pao-cat-badge.dio {
      background: linear-gradient(135deg, rgba(79, 124, 130, 0.18), rgba(79, 124, 130, 0.08));
      color: var(--winter-medium);
      border: 1px solid rgba(79, 124, 130, 0.2);
    }

    .pao-cat-badge.pssr {
      background: linear-gradient(135deg, rgba(58, 107, 112, 0.18), rgba(58, 107, 112, 0.08));
      color: var(--apple-green);
      border: 1px solid rgba(58, 107, 112, 0.2);
    }

    .pao-cat-badge.ora {
      background: linear-gradient(135deg, rgba(94, 123, 130, 0.18), rgba(94, 123, 130, 0.08));
      color: var(--apple-purple);
      border: 1px solid rgba(94, 123, 130, 0.2);
    }

    .pao-cat-badge.pt {
      background: linear-gradient(135deg, rgba(212, 136, 74, 0.18), rgba(212, 136, 74, 0.08));
      color: var(--apple-orange);
      border: 1px solid rgba(212, 136, 74, 0.2);
    }

    /* Status Badge - Apple Style */
    .pao-status-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.4rem 0.85rem;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.01em;
    }

    .pao-status-badge.ongoing {
      background: linear-gradient(135deg, rgba(79, 124, 130, 0.15), rgba(79, 124, 130, 0.08));
      color: var(--winter-medium);
      border: 1px solid rgba(79, 124, 130, 0.15);
    }

    .pao-status-badge.completed {
      background: linear-gradient(135deg, rgba(58, 107, 112, 0.15), rgba(58, 107, 112, 0.08));
      color: var(--apple-green);
      border: 1px solid rgba(58, 107, 112, 0.15);
    }

    .pao-status-badge.overdue {
      background: linear-gradient(135deg, rgba(196, 92, 92, 0.15), rgba(196, 92, 92, 0.08));
      color: var(--apple-red);
      border: 1px solid rgba(196, 92, 92, 0.15);
    }

    .pao-status-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 4px currentColor;
    }

    /* Days Remaining */
    .pao-days {
      font-weight: 600;
      font-size: 0.85rem;
    }

    .pao-days.positive {
      color: var(--apple-green);
    }

    .pao-days.negative {
      color: var(--apple-red);
    }

    .pao-days.today {
      color: var(--apple-orange);
    }

    /* Parent Name Cell */
    .pao-parent-name {
      min-width: 200px;
      max-width: 35%;
      white-space: normal;
      word-wrap: break-word;
      word-break: break-word;
      line-height: 1.5;
      padding: 0.75rem 0.85rem !important;
      font-size: 0.88rem;
    }

    /* Activity Name Cell */
    .pao-activity-name {
      min-width: 180px;
      max-width: 30%;
      white-space: normal;
      word-wrap: break-word;
      word-break: break-word;
      line-height: 1.5;
      padding: 0.75rem 0.85rem !important;
      font-size: 0.88rem;
    }

    /* Notes Cell */
    .pao-notes-cell {
      min-width: 120px;
      max-width: 20%;
      white-space: normal;
      word-wrap: break-word;
      word-break: break-word;
      line-height: 1.5;
      color: var(--apple-text-secondary);
      font-size: 0.85rem;
      padding: 0.75rem 0.85rem !important;
    }

    /* Empty State */
    .pao-empty-state {
      padding: 3rem 2rem;
      text-align: center;
    }

    .pao-empty-icon {
      width: 64px;
      height: 64px;
      margin: 0 auto 1rem;
      color: var(--apple-text-tertiary);
    }

    .pao-empty-title {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--apple-text-secondary);
      margin-bottom: 0.5rem;
    }

    .pao-empty-text {
      font-size: 0.9rem;
      color: var(--apple-text-tertiary);
    }

    /* Top Persons List (Default View) */
    .pao-top-persons {
      margin-top: 1.5rem;
    }

    .pao-top-title {
      font-size: 1rem;
      font-weight: 600;
      color: var(--winter-dark);
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .pao-top-title svg {
      width: 20px;
      height: 20px;
      color: var(--winter-medium);
    }

    .pao-top-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1rem;
    }

    .pao-top-card {
      background: #FFFFFF;
      border: 1px solid rgba(79, 124, 130, 0.15);
      border-radius: 14px;
      padding: 1.25rem;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .pao-top-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--apple-shadow-md);
      border-color: var(--winter-medium);
    }

    .pao-top-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--winter-light), var(--winter-medium));
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
      font-weight: 600;
      font-size: 1rem;
      flex-shrink: 0;
    }

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

    .pao-top-name {
      font-weight: 600;
      color: var(--apple-text-primary);
      font-size: 0.95rem;
      margin-bottom: 0.15rem;
    }

    .pao-top-dept {
      font-size: 0.8rem;
      color: var(--apple-text-secondary);
    }

    .pao-top-stats {
      display: flex;
      gap: 0.75rem;
      flex-shrink: 0;
    }

    .pao-top-stat {
      text-align: center;
    }

    .pao-top-stat-value {
      font-size: 1.1rem;
      font-weight: 700;
      line-height: 1;
    }

    .pao-top-stat-value.total {
      color: var(--winter-dark);
    }

    .pao-top-stat-value.overdue {
      color: var(--apple-red);
    }

    .pao-top-stat-label {
      font-size: 0.65rem;
      color: var(--apple-text-tertiary);
      text-transform: uppercase;
      margin-top: 0.2rem;
    }

    /* Responsive - Apple Style */
    @media (max-width: 900px) {
      .pao-stats-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .pao-table-filters {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
      }

      .pao-results-count {
        margin-left: 0;
      }
    }

    @media (max-width: 600px) {
      .pao-content {
        padding: 1.25rem 1rem 3rem;
      }

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

      .pao-title {
        font-size: 1.5rem;
      }

      .pao-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.875rem;
      }

      .pao-stat-card {
        padding: 1.25rem;
      }

      .pao-stat-value {
        font-size: 2rem;
      }

      .pao-top-grid {
        grid-template-columns: 1fr;
      }

      .header-pills {
        flex-direction: column;
        align-items: flex-end;
      }
    }

    main {
      padding: 0.5rem 2.5rem 4rem;
      position: relative;
      z-index: 1;
    }

    .empty {
      font-size: 0.9375rem;
      color: var(--apple-text-secondary);
      margin-top: 0;
      text-align: center;
      padding: 1rem 0;
      font-weight: 400;
      letter-spacing: -0.01em;
    }

    .kpi-grid {
      display: grid;
      /* Reduce card width for a more compact layout */
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 2rem;
      margin-top: 0;
      margin-bottom: 2.5rem;
      padding: 0.5rem;
    }

    .kpi-card {
      background: #FFFFFF;
      border-radius: 20px;
      /* Slightly increase padding for better spacing */
      padding: 1.5rem 1.75rem;
      border: 1px solid rgba(79, 124, 130, 0.2);
      box-shadow: var(--apple-shadow-md);
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
      animation: slideInUp 0.6s ease-out backwards;
      display: flex;
      flex-direction: column;
      min-height: auto;
    }

    .kpi-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--winter-light), var(--winter-medium), var(--winter-dark));
      opacity: 1;
    }

    .kpi-card::after {
      display: none;
    }

    .kpi-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--apple-shadow-lg);
      border-color: rgba(79, 124, 130, 0.4);
    }

    .kpi-card:hover::before,
    .kpi-card:hover::after {
      opacity: 1;
    }

    .kpi-card:nth-child(1) { animation-delay: 0.1s; }
    .kpi-card:nth-child(2) { animation-delay: 0.15s; }
    .kpi-card:nth-child(3) { animation-delay: 0.2s; }
    .kpi-card:nth-child(4) { animation-delay: 0.25s; }
    .kpi-card:nth-child(5) { animation-delay: 0.3s; }
    .kpi-card:nth-child(6) { animation-delay: 0.35s; }
    .kpi-card:nth-child(7) { animation-delay: 0.4s; }
    .kpi-card:nth-child(8) { animation-delay: 0.45s; }
    .kpi-card:nth-child(9) { animation-delay: 0.5s; }

    .kpi-title {
      font-size: 1.2rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--winter-dark);
      margin-bottom: 0.25rem;
      font-weight: 700;
    }

    .kpi-main {
      /* Decrease primary number size for better balance */
      font-size: 2.1rem;
      font-weight: 700;
      margin-bottom: 0.125rem;
      letter-spacing: -0.03em;
      line-height: 1.1;
      color: var(--apple-text-primary);
    }

    .kpi-sub {
      font-size: 0.875rem;
      color: var(--apple-text-secondary);
      margin-bottom: 1rem;
      margin-top: 0;
      font-weight: 400;
      letter-spacing: -0.01em;
    }

    .kpi-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.625rem;
      margin-top: auto;
    }

    /*
      A wrapper for paired KPI cards. Each .kpi-group stacks two .kpi-card elements vertically.
      Without this wrapper the second card would sit next to the first one in the grid,
      but the desired layout is to have it underneath. The gap matches the spacing used in the grid.
    */
    .kpi-group {
      display: flex;
      flex-direction: column;
      gap: 2rem;

      /*
        The gap between paired KPI cards. Removed debug border after verifying
        correct grouping behaviour.
      */
    }

    .kpi-tag {
      font-size: 0.8125rem;
      padding: 0.5rem 0.875rem;
      border-radius: 100px;
      border: 1px solid rgba(79, 124, 130, 0.3);
      font-weight: 500;
      letter-spacing: -0.01em;
      transition: all 0.3s ease;
      background: rgba(79, 124, 130, 0.1);
      box-shadow: var(--apple-shadow-sm);
    }

    /*
      Styles for the summary KPI card that appears beneath the SCE card. This
      card contains two sections (overall activities and overall categories).
      We use a wrapper to stack the sections vertically with a consistent
      spacing and provide smaller titles for each section. These styles
      explicitly target only elements within the summary container to avoid
      affecting other KPI cards.
    */
    .kpi-summary {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      width: 100%;
    }

    .kpi-summary-section {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .kpi-summary-section .section-title {
      font-size: 0.8125rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--apple-text-secondary);
      font-weight: 600;
      margin-bottom: 0.25rem;
    }

    /* Smaller font for numbers in summary sections to distinguish them from
       primary KPI cards. The .kpi-main within the summary uses a slightly
       reduced size but retains the gradient text styling. */
    .kpi-summary-section .kpi-main {
      font-size: 2rem;
    }

    /* Adjust the spacing of tags within summary sections to prevent wrapping
       issues when there are many tags. */
    .kpi-summary-section .kpi-tags {
      gap: 0.5rem;
    }

    .kpi-tag:hover {
      transform: translateY(-2px);
      box-shadow: var(--apple-shadow-md);
    }

    .tag-open {
      background: rgba(79, 124, 130, 0.12);
      border-color: rgba(79, 124, 130, 0.35);
      color: var(--winter-dark);
    }

    .tag-closed {
      background: rgba(58, 107, 112, 0.12);
      border-color: rgba(58, 107, 112, 0.35);
      color: var(--apple-green);
    }

    .kpi-tag.red {
      background: rgba(196, 92, 92, 0.1);
      border-color: rgba(196, 92, 92, 0.3);
      color: var(--apple-red);
    }

    .kpi-tag.green {
      background: rgba(58, 107, 112, 0.12);
      border-color: rgba(58, 107, 112, 0.35);
      color: var(--apple-green);
    }

    /* Container-style status buttons - Vertical layout like ORA/TRA sections */
    .kpi-status-grid {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: auto;
    }

    .kpi-status-btn {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
      width: 100%;
      padding: 10px 16px;
      border-radius: 16px;
      border: 1px solid rgba(79, 124, 130, 0.2);
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      background: rgba(184, 227, 233, 0.2);
    }

    .kpi-status-btn:hover {
      transform: scale(1.02);
      background: rgba(184, 227, 233, 0.35);
      border-color: rgba(79, 124, 130, 0.4);
    }

    .kpi-status-btn:active {
      transform: scale(0.98);
    }

    .kpi-status-btn.tag-open {
      background: rgba(79, 124, 130, 0.1);
      border-color: rgba(79, 124, 130, 0.25);
    }

    .kpi-status-btn.tag-closed {
      background: rgba(58, 107, 112, 0.1);
      border-color: rgba(58, 107, 112, 0.25);
    }

    .kpi-status-title {
      display: flex;
      align-items: center;
      font-size: 0.9rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      opacity: 0.9;
    }

    .kpi-status-btn.tag-open .kpi-status-title {
      color: var(--winter-dark);
    }

    .kpi-status-btn.tag-closed .kpi-status-title {
      color: var(--apple-green);
    }

    .kpi-status-val {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--apple-text-primary);
      font-feature-settings: "tnum";
      line-height: 1;
    }

    .sce-select {
      width: 100%;
      padding: 0.75rem 1rem;
      background: rgba(79, 124, 130, 0.1);
      border: 1px solid rgba(79, 124, 130, 0.25);
      border-radius: 12px;
      color: var(--apple-text-primary);
      font-size: 0.875rem;
      font-weight: 500;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-top: 0.5rem;
    }

    .sce-select:hover:not(:disabled) {
      background: rgba(79, 124, 130, 0.18);
      border-color: rgba(79, 124, 130, 0.4);
    }

    .sce-select:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .sce-select:focus {
      outline: none;
      border-color: var(--winter-medium);
      box-shadow: 0 0 0 3px rgba(79, 124, 130, 0.2);
    }

    .sce-select option {
      background: #FFFFFF;
      color: var(--apple-text-primary);
      padding: 0.5rem;
    }
/* --- UPDATED: Compact Apple-Style Buttons --- */
.kpi-complex-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 10px 16px;
  border-radius: 16px;
  border: 1px solid rgba(79, 124, 130, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  background: rgba(79, 124, 130, 0.08);
}

.kpi-complex-btn:hover {
  transform: scale(1.02);
  background: rgba(79, 124, 130, 0.15);
  border-color: rgba(79, 124, 130, 0.4);
}

.kpi-complex-btn:active {
  transform: scale(0.98);
}

/* Header: Title */
.btn-header {
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.9;
  text-transform: uppercase;
}

/* Stat Row: Container for numbers */
.btn-stats-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}

/* Individual Stat Item */
.btn-stat-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.btn-stat-val {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--apple-text-primary);
  font-feature-settings: "tnum";
  line-height: 1;
}

.btn-stat-lbl {
  font-size: 0.7rem;
  color: var(--apple-text-secondary);
  font-weight: 500;
  line-height: 1;
}

/* Vertical Divider */
.btn-divider {
  width: 1px;
  height: 16px;
  background: rgba(79, 124, 130, 0.3);
  margin: 0 8px;
}

/* Theme Colors - Winter Chill style */
.theme-blue {
  background: rgba(79, 124, 130, 0.1);
  border-color: rgba(79, 124, 130, 0.25);
}
.theme-blue .btn-header { color: var(--winter-dark); }

.theme-purple {
  background: rgba(147, 177, 181, 0.15);
  border-color: rgba(147, 177, 181, 0.3);
}
.theme-purple .btn-header { color: var(--winter-medium); }
     .chart-wrap {
      background: #FFFFFF;
      border-radius: 24px;
      padding: 2.5rem 2.5rem 2rem;
      border: 1px solid rgba(79, 124, 130, 0.2);
      box-shadow: var(--apple-shadow-lg);
      margin-bottom: 3rem;
      position: relative;
      overflow: hidden;
      animation: slideInUp 0.6s ease-out 0.3s backwards;
      transition: box-shadow 0.3s ease, border-color 0.3s ease;
    }

    .chart-wrap:hover {
      box-shadow: var(--apple-shadow-xl);
      border-color: rgba(79, 124, 130, 0.4);
    }

    .chart-wrap::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--winter-light), var(--winter-medium), var(--winter-dark));
    }

    .chart-title {
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--apple-text-primary);
    }

    .chart-subtitle {
      font-size: 0.9375rem;
      color: var(--apple-text-secondary);
      margin-bottom: 1.5rem;
      font-weight: 400;
      letter-spacing: -0.01em;
    }

    .chart-container {
      width: 100%;
      height: 320px;
      margin-top: 1rem;
      position: relative;
    }

    .chart-panel {
      position: relative;
      height: 100%;
      padding-top: 0.25rem;
    }

    .chart-panel-title {
      font-size: 0.75rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--apple-text-secondary);
      margin-bottom: 0.75rem;
    }

    #kpiChart {
      width: 100% !important;
      height: 100% !important;
      display: block;
    }

    canvas {
      display: block;
      max-width: 100%;
    }

    /* ============================================================
       COMPLETION STATS — Pie chart dizaynı
       ============================================================ */
    :root {
      --cs-ease-apple: cubic-bezier(0.32, 0.72, 0, 1);
      --cs-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
      --cs-seg-completed: #2E9E63;
      --cs-seg-completed-light: #7BDDA3;
      --cs-seg-ongoing: #2E6FB5;
      --cs-seg-ongoing-light: #82C0F5;
      --cs-seg-overdue: #C0392B;
      --cs-seg-overdue-light: #EE948F;
      --cs-seg-waiting: #D4882F;
      --cs-seg-waiting-light: #F4C77E;
      --cs-seg-cancelled: #C0392B;
      --cs-seg-cancelled-light: #EE948F;
    }

    .cs-layout {
      display: grid;
      grid-template-columns: minmax(280px, 1fr) minmax(360px, 1.2fr);
      gap: 2rem;
      align-items: stretch;
    }

    /* Sol pill grid (3 sütun) */
    .cs-pill-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.55rem;
      align-content: start;
    }

    .cs-pill {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.4rem;
      padding: 0.75rem 0.85rem;
      border-radius: 16px;
      background: rgba(79, 124, 130, 0.06);
      border: 1px solid rgba(79, 124, 130, 0.12);
      cursor: pointer;
      transition:
        background 0.35s var(--cs-ease-apple),
        border-color 0.35s var(--cs-ease-apple),
        transform 0.25s var(--cs-ease-apple),
        box-shadow 0.35s var(--cs-ease-apple);
      user-select: none;
      animation: slideInUp 0.5s var(--cs-ease-apple) backwards;
      overflow: hidden;
      min-height: 64px;
    }

    .cs-pill:nth-child(1) { animation-delay: 0.04s; }
    .cs-pill:nth-child(2) { animation-delay: 0.08s; }
    .cs-pill:nth-child(3) { animation-delay: 0.12s; }
    .cs-pill:nth-child(4) { animation-delay: 0.16s; }
    .cs-pill:nth-child(5) { animation-delay: 0.20s; }
    .cs-pill:nth-child(6) { animation-delay: 0.24s; }
    .cs-pill:nth-child(7) { animation-delay: 0.28s; }
    .cs-pill:nth-child(8) { animation-delay: 0.32s; }

    .cs-pill:hover {
      background: rgba(79, 124, 130, 0.12);
      border-color: rgba(79, 124, 130, 0.25);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(11, 46, 51, 0.08);
    }

    .cs-pill:active {
      transform: translateY(-1px) scale(0.98);
    }

    .cs-pill.active {
      background: linear-gradient(135deg, var(--winter-medium) 0%, var(--winter-dark) 100%);
      border-color: var(--winter-dark);
      box-shadow:
        0 6px 20px rgba(11, 46, 51, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    .cs-pill.active:hover {
      transform: translateY(-2px);
    }

    .cs-pill-name {
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--apple-text-primary);
      letter-spacing: -0.01em;
      line-height: 1.25;
      transition: color 0.35s var(--cs-ease-apple);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .cs-pill.active .cs-pill-name {
      color: #FFFFFF;
    }

    .cs-pill-badge {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 42px;
      height: 22px;
      padding: 0 0.55rem;
      border-radius: 100px;
      background: rgba(79, 124, 130, 0.18);
      font-size: 0.7rem;
      font-weight: 700;
      color: var(--winter-dark);
      letter-spacing: -0.01em;
      transition:
        background 0.35s var(--cs-ease-apple),
        color 0.35s var(--cs-ease-apple);
      align-self: flex-end;
    }

    .cs-pill.active .cs-pill-badge {
      background: rgba(255, 255, 255, 0.22);
      color: #FFFFFF;
    }

    /* Sağ pie chart sahəsi */
    .cs-chart-stage {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: linear-gradient(180deg, #FAFDFD 0%, #F4FAFB 100%);
      border-radius: 20px;
      padding: 1.5rem 1.5rem 1.25rem;
      border: 1px solid rgba(79, 124, 130, 0.08);
      overflow: hidden;
      min-height: 380px;
    }

    .cs-chart-stage::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -20%;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(184, 227, 233, 0.25) 0%, transparent 70%);
      pointer-events: none;
    }

    .cs-stage-header {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.5rem;
      position: relative;
      z-index: 2;
    }

    .cs-stage-name {
      font-size: 1rem;
      font-weight: 700;
      color: var(--apple-text-primary);
      letter-spacing: -0.02em;
      transition: opacity 0.3s var(--cs-ease-apple);
    }

    .cs-stage-total-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.3rem 0.7rem;
      border-radius: 100px;
      background: rgba(79, 124, 130, 0.10);
      border: 1px solid rgba(79, 124, 130, 0.18);
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--apple-text-secondary);
    }

    .cs-stage-total-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--winter-medium);
    }

    .cs-pie-container {
      position: relative;
      width: 100%;
      max-width: 290px;
      aspect-ratio: 1 / 1;
      margin: 0.5rem 0;
      animation: scaleIn 0.5s var(--cs-ease-apple);
    }

    #csPieChart {
      width: 100% !important;
      height: 100% !important;
    }

    .cs-pie-center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      pointer-events: none;
      z-index: 3;
      transition: opacity 0.3s var(--cs-ease-apple);
    }

    .cs-pie-percent {
      font-size: 2.5rem;
      font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 1;
      background: linear-gradient(135deg, var(--winter-medium) 0%, var(--winter-dark) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }

    .cs-pie-label {
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--apple-text-tertiary);
      margin-top: 0.3rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    @keyframes scaleIn {
      from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
      to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }

    .cs-pie-container {
      animation-name: scaleInBox;
    }
    @keyframes scaleInBox {
      from { opacity: 0; transform: scale(0.92); }
      to   { opacity: 1; transform: scale(1); }
    }

    .cs-legend {
      display: flex;
      gap: 0.6rem;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 0.5rem;
      animation: fadeIn 0.5s var(--cs-ease-apple) 0.2s backwards;
    }

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

    .cs-legend-item {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.4rem 0.75rem;
      border-radius: 100px;
      background: rgba(255, 255, 255, 0.85);
      border: 1px solid rgba(79, 124, 130, 0.12);
      cursor: pointer;
      font-family: inherit;
      -webkit-appearance: none;
      appearance: none;
      outline: none;
      transition:
        background 0.3s var(--cs-ease-apple),
        transform 0.25s var(--cs-ease-apple),
        border-color 0.3s var(--cs-ease-apple),
        box-shadow 0.3s var(--cs-ease-apple);
    }
    /* Klaviatura naviqasiyası üçün fokus göstəricisi (outline: none-un əvəzi). */
    .cs-legend-item:focus-visible {
      outline: 2px solid var(--apple-blue);
      outline-offset: 2px;
      border-radius: 6px;
    }

    .cs-legend-item:hover {
      background: #FFFFFF;
      border-color: rgba(79, 124, 130, 0.3);
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(11, 46, 51, 0.08);
    }

    .cs-legend-item:active {
      transform: translateY(0) scale(0.97);
    }

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

    .cs-legend-dot.completed { background: linear-gradient(135deg, var(--cs-seg-completed-light), var(--cs-seg-completed)); }
    .cs-legend-dot.ongoing   { background: linear-gradient(135deg, var(--cs-seg-ongoing-light), var(--cs-seg-ongoing)); }
    .cs-legend-dot.overdue   { background: linear-gradient(135deg, var(--cs-seg-overdue-light), var(--cs-seg-overdue)); }
    .cs-legend-dot.waiting   { background: linear-gradient(135deg, var(--cs-seg-waiting-light), var(--cs-seg-waiting)); }
    .cs-legend-dot.cancelled { background: linear-gradient(135deg, var(--cs-seg-cancelled-light), var(--cs-seg-cancelled)); }

    .cs-legend-arrow {
      width: 13px;
      height: 13px;
      flex-shrink: 0;
      color: var(--apple-text-tertiary);
      opacity: 0;
      transform: translateX(-4px);
      transition: opacity 0.3s var(--cs-ease-apple), transform 0.3s var(--cs-ease-apple);
      margin-left: -0.1rem;
    }
    .cs-legend-item:hover .cs-legend-arrow {
      opacity: 0.9;
      transform: translateX(0);
    }

    .cs-legend-label {
      font-size: 0.78rem;
      font-weight: 500;
      color: var(--apple-text-secondary);
      letter-spacing: -0.01em;
    }

    .cs-legend-value {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--apple-text-primary);
      letter-spacing: -0.01em;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .cs-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }
      .cs-pill-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    @media (max-width: 768px) {
      .cs-pill-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 480px) {
      .cs-pill-grid {
        grid-template-columns: 1fr 1fr;
      }
      .cs-pie-percent { font-size: 2rem; }
    }

    .projects-section {
      margin-top: 1rem;
      animation: slideInUp 0.6s ease-out 0.4s backwards;
    }

    .projects-title {
      font-size: 1.375rem;
      margin-bottom: 1.75rem;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--apple-text-primary);
      padding-left: 0.5rem;
    }

    .project-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem;
    }

    .project-card {
      background: #FFFFFF;
      border-radius: 20px;
      border: 1px solid rgba(79, 124, 130, 0.2);
      padding: 1.75rem 2rem;
      box-shadow: var(--apple-shadow-md);
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .project-card::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: radial-gradient(circle,
        rgba(79, 124, 130, 0.15),
        transparent 70%);
      transform: translate(-50%, -50%);
      transition: width 0.4s ease, height 0.4s ease;
    }

    .project-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--winter-light), var(--winter-medium), var(--winter-dark));
      opacity: 1;
    }

    .project-card:hover::before {
      width: 300px;
      height: 300px;
    }

    .project-card:hover {
      transform: translateY(-6px);
      border-color: rgba(79, 124, 130, 0.4);
      box-shadow: var(--apple-shadow-lg);
    }

    .project-card:active {
      transform: translateY(-3px) scale(0.99);
    }

    .project-name {
      font-size: 1.125rem;
      font-weight: 600;
      margin-bottom: 0.75rem;
      letter-spacing: -0.01em;
      color: var(--apple-text-primary);
      position: relative;
      z-index: 1;
    }

    .project-desc {
      font-size: 0.9375rem;
      color: var(--apple-text-secondary);
      min-height: 1.5em;
      font-style: italic;
      font-weight: 400;
      letter-spacing: -0.01em;
      transition: all 0.3s ease;
      position: relative;
      z-index: 1;
      opacity: 0;
      transform: translateY(5px);
    }

    .project-card:hover .project-desc {
      opacity: 1;
      transform: translateY(0);
    }

    .status-text {
      font-size: 0.8125rem;
      color: var(--apple-orange);
      white-space: pre-wrap;
      text-align: right;
      font-weight: 500;
      letter-spacing: -0.01em;
    }

    /* ============================================== */
    /* MEGA DROPDOWN PANEL - Apple Style               */
    /* ============================================== */
    .mega-dropdown-wrapper {
      position: relative;
      display: inline-flex;
    }

    .mega-dropdown-trigger {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      background: rgba(79, 124, 130, 0.07);
      border: 1px solid rgba(79, 124, 130, 0.15);
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      font-family: inherit;
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--winter-dark);
      letter-spacing: -0.01em;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    .mega-dropdown-trigger:hover {
      background: rgba(79, 124, 130, 0.13);
      border-color: rgba(79, 124, 130, 0.25);
      box-shadow: 0 2px 12px -3px rgba(11, 46, 51, 0.12);
    }

    .mega-dropdown-trigger:active {
      transform: scale(0.97);
    }

    .mega-dropdown-trigger .trigger-icon {
      width: 18px;
      height: 18px;
      opacity: 0.7;
      flex-shrink: 0;
    }

    .mega-dropdown-trigger .trigger-chevron {
      width: 14px;
      height: 14px;
      opacity: 0.5;
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      flex-shrink: 0;
    }

    .mega-dropdown-wrapper.open .mega-dropdown-trigger {
      background: rgba(79, 124, 130, 0.15);
      border-color: rgba(79, 124, 130, 0.3);
      box-shadow: 0 2px 12px -3px rgba(11, 46, 51, 0.12);
    }

    .mega-dropdown-wrapper.open .trigger-chevron {
      transform: rotate(180deg);
    }

    /* Backdrop overlay */
    .mega-dropdown-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 998;
      display: none;
    }

    .mega-dropdown-wrapper.open .mega-dropdown-backdrop {
      display: block;
    }

    /* Panel */
    .mega-dropdown-panel {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      width: 480px;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(40px) saturate(200%);
      -webkit-backdrop-filter: blur(40px) saturate(200%);
      border: 1px solid rgba(79, 124, 130, 0.12);
      border-radius: 18px;
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.5) inset,
        0 24px 80px -16px rgba(11, 46, 51, 0.2),
        0 8px 24px -8px rgba(11, 46, 51, 0.08);
      z-index: 999;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px) scale(0.98);
      transform-origin: top right;
      transition: all 0.35s cubic-bezier(0.32, 0.72, 0, 1);
      overflow: hidden;
    }

    .mega-dropdown-wrapper.open .mega-dropdown-panel {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
    }

    .mega-dropdown-panel-inner {
      padding: 0.75rem;
    }

    /* Section group */
    .mdp-section {
      margin-bottom: 0.375rem;
    }

    .mdp-section:last-child {
      margin-bottom: 0;
    }

    .mdp-section-header {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      padding: 0.75rem 1rem;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(79, 124, 130, 0.06), rgba(79, 124, 130, 0.02));
      margin-bottom: 0.25rem;
    }

    .mdp-section-icon {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .mdp-section-icon.teal {
      background: linear-gradient(135deg, var(--winter-medium), var(--winter-dark));
      box-shadow: 0 2px 8px -2px rgba(79, 124, 130, 0.3);
    }

    .mdp-section-icon.blue {
      background: linear-gradient(135deg, #3A6B70, #0B2E33);
      box-shadow: 0 2px 8px -2px rgba(58, 107, 112, 0.3);
    }

    .mdp-section-icon svg {
      width: 17px;
      height: 17px;
      color: #fff;
    }

    .mdp-section-title {
      font-size: 0.8125rem;
      font-weight: 650;
      color: var(--winter-dark);
      letter-spacing: -0.01em;
    }

    /* Sub-items */
    .mdp-items {
      padding-left: 0.5rem;
    }

    .mdp-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.7rem 1rem 0.7rem 1.25rem;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      text-decoration: none;
      color: inherit;
      position: relative;
    }

    .mdp-item::before {
      content: '';
      position: absolute;
      left: 0.55rem;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: rgba(79, 124, 130, 0.25);
      transition: all 0.2s ease;
    }

    .mdp-item:hover {
      background: rgba(79, 124, 130, 0.06);
    }

    .mdp-item:hover::before {
      background: var(--winter-medium);
      width: 5px;
      height: 5px;
    }

    .mdp-item:active {
      background: rgba(79, 124, 130, 0.1);
      transform: scale(0.99);
    }

    .mdp-item-icon {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: rgba(79, 124, 130, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.2s ease;
    }

    .mdp-item:hover .mdp-item-icon {
      background: rgba(79, 124, 130, 0.14);
    }

    .mdp-item-icon svg {
      width: 14px;
      height: 14px;
      color: var(--winter-medium);
    }

    .mdp-item-text {
      flex: 1;
    }

    .mdp-item-label {
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--apple-text-primary);
      letter-spacing: -0.01em;
    }

    .mdp-item-arrow {
      width: 14px;
      height: 14px;
      opacity: 0;
      transform: translateX(-4px);
      transition: all 0.2s ease;
      color: var(--winter-medium);
    }

    .mdp-item:hover .mdp-item-arrow {
      opacity: 0.6;
      transform: translateX(0);
    }

    /* Divider */
    .mdp-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(79, 124, 130, 0.1), transparent);
      margin: 0.375rem 1rem;
    }

    /* Responsive */
    @media (max-width: 600px) {
      .mega-dropdown-panel {
        width: calc(100vw - 2rem);
        right: -0.5rem;
      }
      .mega-dropdown-trigger span {
        display: none;
      }
      .mega-dropdown-trigger {
        padding: 0.5rem 0.65rem;
      }
    }

    ::-webkit-scrollbar {
      width: 12px;
    }

    ::-webkit-scrollbar-track {
      background: rgba(79, 124, 130, 0.1);
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(79, 124, 130, 0.4);
      border-radius: 6px;
      border: 2px solid rgba(79, 124, 130, 0.1);
    }

    ::-webkit-scrollbar-thumb:hover {
      background: rgba(79, 124, 130, 0.6);
    }

    @media (max-width: 768px) {
      header, main {
        padding-inline: 1.5rem;
      }

      header {
        padding-top: 1rem;
        padding-bottom: 1rem;
      }

      .status-box {
        align-items: flex-start;
      }

      .status-text {
        text-align: left;
      }

      h1 {
        font-size: 1.375rem;
      }

      .subtitle {
        font-size: 0.875rem;
      }

      .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
      }

      .pt-activities-grid {
        grid-template-columns: 1fr;
      }

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

      .chart-wrap {
      background: #FFFFFF;
      border-radius: 24px;
      padding: 2.5rem;
      border: 1px solid rgba(79, 124, 130, 0.2);
      box-shadow: var(--apple-shadow-md);
      margin-bottom: 3rem;
      position: relative;
      overflow: hidden;
      animation: slideInUp 0.6s ease-out 0.3s backwards;
    }

    /* Increase chart container height for better visibility */
    .chart-container {
      width: 100%;
      height: 380px;
      margin-top: 1.5rem;
      position: relative;
    }

      .kpi-main {
        font-size: 1.75rem;
      }

      .chart-title {
        font-size: 1.0625rem;
      }

      .projects-title {
        font-size: 1.125rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* --- UPDATED MODAL CSS ---
      Pop-up yerləşimi və scroll problemi üçün düzəlişlər
    */
    .project-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(11, 46, 51, 0.2);
      display: none;

      /* FIX: Modalı yuxarıdan başlatmaq üçün align-items: flex-start */
      align-items: flex-start;
      justify-content: center;

      z-index: 9999;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);

      /* FIX: Yuxarıdan az boşluq (2rem) veririk ki, çox ortada olmasın */
      padding: 2rem 1.5rem;

      /* FIX: Overlay-in özünü scroll edilə bilən edirik */
      overflow-y: auto;
    }

    .project-modal-overlay.is-visible {
      display: flex;
    }

    .project-modal {
      position: relative;
      max-width: 640px;
      width: 100%;
      background: #FFFFFF;
      border-radius: 24px;
      border: 1px solid rgba(79, 124, 130, 0.25);
      box-shadow: var(--apple-shadow-xl);
      padding: 1.75rem 2rem 2rem;
      color: var(--apple-text-primary);
      animation: slideInUp 0.3s ease-out;

      /* FIX: Horizontal mərkəzləmə və aşağı scroll üçün margin */
      margin: 0 auto 2rem auto;
    }

    .project-modal-header {
      margin-bottom: 1.25rem;
    }

    .project-modal-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.25rem 0.75rem;
      border-radius: 999px;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      background: rgba(79, 124, 130, 0.2);
      border: 1px solid rgba(79, 124, 130, 0.4);
      color: var(--winter-dark);
    }

    .project-modal-title {
      margin: 0.5rem 0 0;
      font-size: 1.4rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      color: var(--apple-text-primary);
    }

    .project-modal-body {
      font-size: 0.9rem;
      line-height: 1.6;
      color: var(--apple-text-secondary);
      white-space: pre-line;
    }

    .project-modal-close {
      position: absolute;
      top: 0.85rem;
      right: 1rem;
      width: 32px;
      height: 32px;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      background: rgba(79, 124, 130, 0.2);
      color: var(--winter-dark);
      font-size: 1.2rem;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease, transform 0.2s ease;
    }

    .project-modal-close:hover {
      background: rgba(214, 69, 69, 0.15);
      color: var(--apple-red);
      transform: scale(1.05);
    }

    .project-modal-close:active {
      transform: scale(0.95);
    }

    /* -------------------------------------------------- */
    /*                  MOC modalları                    */
    /* Yeni əlavə edilən "Göstər" düyməsini və DİO MOC  */
    /* seçim/form modallarını dizayn etmək üçün stil.  */
    /* Bu düymə saytdakı digər elementlər kimi şüşə  */
    /* effektli gradient arxa fon istifadə edir və eyni  */
    /* radius, kölgə və animasiya xüsusiyyətlərini        */
    /* saxlayır.                                     */
    .moc-show-btn {
      margin-top: 1rem;
      width: 100%;
      padding: 0.75rem 1.25rem;
      border-radius: 14px;
      font-size: 0.875rem;
      font-weight: 600;
      border: 1px solid rgba(79, 124, 130, 0.3);
      color: var(--winter-dark);
      background: rgba(79, 124, 130, 0.15);
      box-shadow: var(--apple-shadow-sm);
      cursor: pointer;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .moc-show-btn:hover {
      background: rgba(79, 124, 130, 0.25);
      border-color: rgba(79, 124, 130, 0.5);
      transform: translateY(-2px);
      box-shadow: var(--apple-shadow-md);
    }

    .moc-show-btn:active {
      transform: translateY(0);
      box-shadow: var(--apple-shadow-sm);
    }

    /* Custom overlay and card styles for new status and actions views */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(11, 46, 51, 0.15);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      overflow: hidden; /* Prevent scroll on overlay backdrop */
    }
    .overlay.is-visible {
      display: flex;
    }
    .overlay-content {
      /* Match the look of project cards: soft gradient with rounded corners and
         subtle inner glow. Increase border radius and add an inset border
         similar to project cards. */
      background: #FFFFFF;
      border-radius: 24px;
      border: 1px solid rgba(79, 124, 130, 0.2);
      box-shadow: var(--apple-shadow-xl);
      max-height: 94%;
      overflow-y: auto;
      overscroll-behavior: contain; /* Prevent scroll chaining to body */
      width: 96%;
      max-width: 1600px;
      padding: 40px 48px;
      padding-top: 64px; /* Make room for sticky close button */
      position: relative;
      color: var(--apple-text-primary);
    }
    .overlay-close {
      position: sticky;
      top: 0;
      float: right;
      margin-top: -36px;
      margin-right: -12px;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(79, 124, 130, 0.15);
      color: var(--apple-text-tertiary);
      font-size: 16px;
      cursor: pointer;
      line-height: 1;
      padding: 4px 8px;
      border-radius: 8px;
      transition: background-color 0.2s, transform 0.2s;
      z-index: 10;
    }
    .overlay-close:hover {
      background-color: rgba(214, 69, 69, 0.12);
      color: var(--apple-red);
      transform: scale(1.05);
    }
    .overlay h2 {
      margin-bottom: 20px;
      font-size: 22px;
      font-weight: 700;
      text-align: center;
      color: var(--winter-dark);
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(79, 124, 130, 0.15);
    }
    .items-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      grid-gap: 16px;
    }
/* --- NEW: Simple List View Style --- */
.items-list-view {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.items-list-view .item-card {
  width: 100%;
  display: flex;
  flex-direction: row; /* Layout side-by-side */
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  min-height: auto; /* Remove fixed height constraints */
}

/* Adjust text for list view */
.items-list-view .item-title {
  font-size: 1rem !important;
  margin: 0 !important;
  flex: 1; /* Take up space */
}

.items-list-view .meta-container {
  margin-top: 0 !important;
  flex-shrink: 0;
}
    /*
      Customisation for items shown inside pop‑up overlays. We restyle the
      generic .item-card to more closely match the look and feel of the
      existing project blocks (glassmorphism with subtle gradients, rounded
      corners and interactive shadows). The card contents also support
      additional metadata such as responsible person and area. A notification
      badge showing the number of open actions can be displayed on top of
      the bell icon. Colour schemes follow the Apple‑inspired palette.
    */
    .item-card {
      background: #FFFFFF;
      border-radius: 16px;
      border: 1px solid rgba(79, 124, 130, 0.2);
      padding: 1.5rem 1.25rem;
      position: relative;
      box-shadow: var(--apple-shadow-md);
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
      cursor: pointer;
      overflow: hidden;
    }
    .item-card:hover {
      transform: translateY(-4px);
      border-color: rgba(79, 124, 130, 0.4);
      box-shadow: var(--apple-shadow-lg);
    }
    .item-card:active {
      transform: translateY(-2px);
    }
    .item-card .item-title {
      /* Emphasize the identifier with a larger size and subtle gradient similar to KPI numbers */
      font-size: 1.125rem;
      font-weight: 700;
      margin-bottom: 0.25rem;
      color: var(--apple-text-primary);
    }
    .item-card .item-name {
      /* Make the description distinct by using secondary text colour */
      font-size: 0.9375rem;
      font-weight: 500;
      margin-bottom: 0.125rem;
      color: var(--apple-text-secondary);
    }
    .item-card .item-responsible,
.item-card .item-area,
.item-card .item-date,
.item-card .item-notes {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(79, 124, 130, 0.1);
  border: 1px solid rgba(79, 124, 130, 0.2);
  font-size: 0.72rem;
  color: var(--apple-text-secondary);
  margin-top: 0.25rem;
  margin-right: 0.35rem;
  font-weight: 400;
  gap: 4px;

  /* NEW: keep pills inside card and cut long text nicely */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Allow area pill to be up to 2 lines instead of one ultra-long line */
.item-card .item-area {
  white-space: normal;                  /* allow wrapping */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;                /* max 2 lines */
}
/* Allow responsible person to display on multiple lines */
.item-card .item-responsible {
  white-space: normal;                  /* allow line breaks between people */
  display: inline-block;
  border-radius: 12px;                  /* rounded corners instead of pill */
  line-height: 1.5;
  text-align: left;
}
    .item-card .item-date,
    .item-card .item-desc {
      font-size: 0.75rem;
      color: var(--apple-text-tertiary);
      margin-bottom: 0.125rem;
    }
    .item-card .progress-container {
      background: rgba(79, 124, 130, 0.2);
      border-radius: 6px;
      height: 6px;
      margin-top: 0.5rem;
      overflow: hidden;
      position: relative;
    }
    .item-card .progress-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--winter-medium), var(--winter-dark));
      transition: width 0.4s ease;
    }
    .item-card .progress-fill.complete {
      background: linear-gradient(90deg, var(--apple-green), var(--apple-green));
    }
    .item-card .progress-label {
      font-size: 0.75rem;
      margin-top: 0.375rem;
      color: var(--apple-text-tertiary);
    }
    .item-card .bell-icon {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* Hide bell completely when hidden class is applied */
    .item-card .bell-icon.hidden {
      display: none;
    }
    /* Base style for the bell image */
    .item-card .bell-icon img {
      width: 100%;
      height: 100%;
      display: block;
    }
    /* Normal state: keep original red color for all bell icons */
    .item-card .bell-icon.normal img {
      filter: none;
    }
    /* Warning state: keep the original red color for overdue actions */
    .item-card .bell-icon.warning img {
      filter: none;
    }
    /* Badge showing number of open actions */
    .item-card .bell-count {
      position: absolute;
      top: -4px;
      right: -4px;
      min-width: 14px;
      height: 14px;
      line-height: 14px;
      border-radius: 50%;
      font-size: 0.625rem;
      font-weight: 600;
      text-align: center;
      color: #FFFFFF;
      background: var(--winter-medium);
      pointer-events: none;
    }
    .item-card .bell-icon.warning .bell-count {
      background: var(--winter-medium);
    }
    /* Detail modals */
    .detail-body {
      font-size: 14px;
      line-height: 1.4;
      color: var(--apple-text-primary);
    }
    .detail-body .field {
      margin-bottom: 8px;
    }
    .actions-table {
      width: 100%;
      min-width: 1200px;
      border-collapse: collapse;
      margin-top: 16px;
    }
    .actions-table th,
    .actions-table td {
      padding: 16px 20px;
      text-align: left;
      font-size: 14px;
      border-bottom: 1px solid rgba(79, 124, 130, 0.15);
      vertical-align: top;
      line-height: 1.6;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
    .actions-table th {
      font-weight: 600;
      color: var(--winter-dark);
      background: linear-gradient(135deg, rgba(79, 124, 130, 0.12), rgba(79, 124, 130, 0.05));
      white-space: nowrap;
      position: sticky;
      top: 0;
      z-index: 5;
      border-bottom: 2px solid rgba(79, 124, 130, 0.25);
    }
    /* Column width distribution - using min-width for proper spacing */
    .actions-table th:nth-child(1),
    .actions-table td:nth-child(1) {
      min-width: 50px;
      width: 50px;
      text-align: center;
    } /* № */
    .actions-table th:nth-child(2),
    .actions-table td:nth-child(2) {
      min-width: 280px;
      width: 25%;
    } /* Fəaliyyət */
    .actions-table th:nth-child(3),
    .actions-table td:nth-child(3) {
      min-width: 220px;
      width: 18%;
    } /* Məsul şəxs */
    .actions-table th:nth-child(4),
    .actions-table td:nth-child(4) {
      min-width: 110px;
      width: 110px;
      text-align: center;
      white-space: nowrap;
    } /* Son tarix */
    .actions-table th:nth-child(5),
    .actions-table td:nth-child(5) {
      min-width: 100px;
      width: 100px;
      text-align: center;
    } /* Nəticə */
    .actions-table th:nth-child(6),
    .actions-table td:nth-child(6) {
      min-width: 100px;
      width: 100px;
      text-align: center;
    } /* Status */
    .actions-table th:nth-child(7),
    .actions-table td:nth-child(7) {
      min-width: 180px;
      width: 15%;
    } /* Qeyd */

    .actions-table tbody tr {
      transition: background-color 0.2s ease;
    }
    .actions-table tbody tr:hover {
      background: rgba(79, 124, 130, 0.04);
    }
    .actions-table tbody tr:last-child td {
      border-bottom: none;
    }
    .actions-table td.status-open {
      color: var(--winter-dark);
      font-weight: 500;
    }
    .actions-table td.status-complete {
      color: var(--apple-green);
      font-weight: 500;
    }
    /* Allow responsible person to display on multiple lines in tables */
    .actions-table .item-responsible {
      white-space: normal;
      display: block;
      line-height: 1.6;
      word-wrap: break-word;
    }

    /* Filter bar and chips for category status overlay */
    .filter-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0 0 16px 0;
    }
    .filter-chip {
      /* Base styling for filter chips: a frosted glass pill with smooth gradients */
      padding: 6px 12px;
      font-size: 0.75rem;
      border-radius: 16px;
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
      background: rgba(79, 124, 130, 0.1);
      color: var(--apple-text-primary);
      border: 1px solid rgba(79, 124, 130, 0.25);
      box-shadow: var(--apple-shadow-sm);
      transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    }
    .filter-chip:hover {
      transform: translateY(-2px);
      box-shadow: var(--apple-shadow-md);
    }
    .filter-chip.active {
      /* Active state uses a subtle gradient and brighter background */
      background: linear-gradient(135deg, var(--winter-medium) 0%, var(--winter-dark) 100%);
      color: #ffffff;
      border-color: transparent;
      box-shadow: 0 4px 12px rgba(79, 124, 130, 0.35);
    }

    /*
     * Filter groups wrap a set of filter chips and the group title. To give
     * a more refined, "card"-like feel reminiscent of Apple's UI, groups
     * have a lightly frosted background, subtle border and inner padding.
     */
    .filter-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-right: 12px;
      padding: 8px 10px;
      background: rgba(79, 124, 130, 0.08);
      border-radius: 14px;
      border: 1px solid rgba(79, 124, 130, 0.15);
      box-shadow: var(--apple-shadow-sm);
    }
    .filter-group-title {
      font-size: 12px;
      font-weight: 500;
      color: var(--apple-text-secondary);
      margin-bottom: 4px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* Hidden utility class */
    .hidden {
      display: none !important;
    }

    /* Filter toggle button */
    .filter-toggle {
      padding: 5px 14px;
      font-size: 13px;
      border-radius: 18px;
      cursor: pointer;
      user-select: none;
      background: rgba(79, 124, 130, 0.1);
      color: var(--apple-text-primary);
      border: 1px solid rgba(79, 124, 130, 0.25);
      margin: 0 0 8px 0;
      box-shadow: var(--apple-shadow-sm);
      transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .filter-toggle:hover {
      background: rgba(79, 124, 130, 0.2);
      box-shadow: var(--apple-shadow-md);
    }

    /* Actions Table Container for horizontal scroll on smaller screens */
    .actions-table-wrapper {
      width: 100%;
      overflow-x: auto;
      border-radius: 16px;
      border: 1px solid rgba(79, 124, 130, 0.15);
      background: #FFFFFF;
      box-shadow: var(--apple-shadow-sm);
      margin-top: 8px;
    }

    .actions-table-wrapper::-webkit-scrollbar {
      height: 8px;
    }

    .actions-table-wrapper::-webkit-scrollbar-track {
      background: rgba(79, 124, 130, 0.05);
      border-radius: 4px;
    }

    .actions-table-wrapper::-webkit-scrollbar-thumb {
      background: rgba(79, 124, 130, 0.3);
      border-radius: 4px;
    }

    .actions-table-wrapper::-webkit-scrollbar-thumb:hover {
      background: rgba(79, 124, 130, 0.5);
    }

    /* Responsive adjustments for overlay and actions table */
    @media (max-width: 1400px) {
      .overlay-content {
        width: 98%;
        max-width: 98%;
        padding: 32px 28px;
        padding-top: 60px;
      }
    }

    @media (max-width: 1200px) {
      .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem;
      }
      .overlay-content {
        width: 98%;
        max-width: 99%;
        padding: 28px 20px;
        padding-top: 56px;
      }
      .actions-table {
        min-width: 1100px;
      }
      .actions-table th,
      .actions-table td {
        padding: 14px 16px;
        font-size: 13px;
      }
    }

    @media (max-width: 768px) {
      .overlay-content {
        width: 99%;
        padding: 20px 12px;
        padding-top: 52px;
        border-radius: 16px;
      }
      .actions-table {
        min-width: 1000px;
      }
      .actions-table th,
      .actions-table td {
        padding: 12px 12px;
        font-size: 12px;
      }
      .overlay h2 {
        font-size: 18px;
        margin-bottom: 16px;
      }
    }

    /*
     * Override metadata chip styles to provide smoother pill shapes and consistent
     * Apple-inspired frosted appearance. These styles apply to the chips
     * displaying responsible person, area, date and additional notes on item cards.
     */
    .item-card .meta-container {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 0.25rem;
    }

    /* Ensure important values (e.g., PTW numbers) inside meta containers are visible.
       Without this, <strong> elements default to the parent's color which may be light on a light background.
       Set the <strong> color to the primary text color to improve readability. */
    .item-card .meta-container strong {
      color: var(--apple-text-primary);
      font-weight: 700;
    }
    .item-card .meta-chip {
      padding: 6px 12px;
      font-size: 0.75rem;
      border-radius: 16px;
      background: rgba(79, 124, 130, 0.1);
      color: var(--apple-text-primary);
      border: 1px solid rgba(79, 124, 130, 0.2);
      box-shadow: var(--apple-shadow-sm);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    .item-card .meta-chip.notes {
      font-style: italic;
      color: var(--apple-text-secondary);
    }
/* --- Main Search Bar Styles (New) --- */
.main-search-container {
  position: relative;
  margin-bottom: 16px;
  width: 100%;
}

.main-search-input {
  width: 100%;
  padding: 12px 16px 12px 40px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--apple-text-primary);
  background: rgba(79, 124, 130, 0.1);
  border: 1px solid rgba(79, 124, 130, 0.25);
  border-radius: 12px;
  outline: none;
  transition: all 0.2s ease;
}

.main-search-input:focus {
  background: rgba(79, 124, 130, 0.15);
  border-color: var(--winter-medium);
  box-shadow: 0 0 0 4px rgba(79, 124, 130, 0.15);
}

.main-search-input::placeholder {
  color: var(--apple-text-tertiary);
}

.main-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--apple-text-tertiary);
  pointer-events: none;
}

/* Empty State Message */
.start-search-msg {
  text-align: center;
  padding: 40px 20px;
  color: var(--apple-text-secondary);
  font-size: 1.1rem;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0.7;
}/* Filter-specific mini search bar */
.filter-group-search {
  width: 100%;
  padding: 8px 12px;
  margin-bottom: 8px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid rgba(79, 124, 130, 0.2);
  background: rgba(79, 124, 130, 0.08);
  color: var(--apple-text-primary);
  outline: none;
  transition: background 0.2s;
}

.filter-group-search:focus {
  background: rgba(79, 124, 130, 0.15);
  border-color: var(--winter-medium);
}

.filter-group-search::placeholder {
  color: var(--apple-text-tertiary);
}
/* Container for chips generated by search */
.filter-results-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
/* --- CSS FIX: Equal Height Cards & PT Level Buttons --- */

    /* Update Grid to stretch items vertically */
    .kpi-grid {
      align-items: stretch;
    }

    /* Ensure groups fill the height */
    .kpi-group {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      height: 100%;
    }

    /* Make cards flex containers so they push content apart (footer at bottom) */
    .kpi-card {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 220px;
    }

    /* Push tags to the bottom of the card */
    .kpi-tags {
      margin-top: auto;
      padding-top: 1rem;
    }

    /* --- New Styles for PT 4-Button Pop-up --- */
    .level-btn-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
      margin-top: 20px;
    }
    .level-btn {
      padding: 20px;
      border-radius: 16px;
      text-align: center;
      cursor: pointer;
      border: 1px solid rgba(79, 124, 130, 0.2);
      background: rgba(79, 124, 130, 0.08);
      transition: transform 0.2s, box-shadow 0.2s;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }
    .level-btn:hover {
      transform: scale(1.03);
      box-shadow: var(--apple-shadow-md);
    }
    .level-btn-title { font-size: 0.9rem; opacity: 0.8; font-weight: 600; color: var(--winter-dark); }
    .level-btn-val { font-size: 1.2rem; font-weight: 700; color: var(--apple-text-primary); }
/* --- DUAL CHART LAYOUT --- */
    .chart-header-group {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 2rem;
    }

    .chart-grid {
      display: grid;
      grid-template-columns: 2fr 1fr; /* Bar chart gets more space */
      gap: 2rem;
      align-items: stretch;
    }

   .canvas-container {
      position: relative;
      width: 100%;
      height: 360px; /* Increased height for 3D perspective */
      overflow: hidden; /* Prevents overflow */
    }

    /* Remove the old Chart.js specific center text logic if you want a cleaner 3D Pie */
    .doughnut-center { display: none; }

    .relative-center {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Doughnut Center Text (Apple Style) */
    .doughnut-center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      pointer-events: none;
    }
    .doughnut-val {
      display: block;
      font-size: 2rem;
      font-weight: 700;
      color: var(--apple-text-primary);
    }
    .doughnut-lbl {
      display: block;
      font-size: 0.8rem;
      color: var(--apple-text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Mobile Responsive */
    @media (max-width: 900px) {
      .chart-grid {
        grid-template-columns: 1fr; /* Stack on mobile */
        gap: 3rem;
      }
      .canvas-container {
        height: 280px;
      }
    }
/* Chart Containers */
    .chart-panel {
      position: relative;
      height: 100%;
      padding-top: 0.5rem;
      perspective: 1000px; /* Needed for 3D tilt */
    }

    /* Fixed Height for 3D Charts */
    .canvas-container {
      width: 100%;
      height: 380px;
      position: relative;
    }

    /* TRICK: Apply CSS 3D Transform to the Pie Chart
       This forces the 2D chart to lay "flat" like a 3D plate
    */
    #kpiDoughnutChart {
      transform: rotateX(45deg) scaleY(1.1); /* Tilts the chart */
      transform-origin: center center;
      filter: drop-shadow(0 20px 20px rgba(0,0,0,0.5)); /* Adds the 3D shadow below */
    }
.kpi-title {
    min-height: 48px;   /* bütün başlıqlar eyni hündürlükdə olsun */
    display: flex;
    align-items: center; /* mətni ortala */
}
/* Filter-specific mini search bar */
.filter-group-search {
  width: 100%;
  padding: 8px 12px;
  margin-bottom: 8px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid rgba(79, 124, 130, 0.2);
  background: rgba(79, 124, 130, 0.08);
  color: var(--apple-text-primary);
  outline: none;
  transition: background 0.2s;
}

.filter-group-search:focus {
  background: rgba(79, 124, 130, 0.15);
  border-color: var(--winter-medium);
}

.filter-group-search::placeholder {
  color: var(--apple-text-tertiary);
}

/* Container for chips generated by search */
.filter-results-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  /* Optional: Limit height if you want scrolling for very long lists */
  max-height: 250px;
  overflow-y: auto;
  padding-right: 4px; /* Space for scrollbar */
}

/* Custom Scrollbar for filter container */
.filter-results-container::-webkit-scrollbar {
  width: 4px;
}
.filter-results-container::-webkit-scrollbar-thumb {
  background: rgba(79, 124, 130, 0.4);
  border-radius: 2px;
}

/* Header title container */
.header-title-group {
  display: flex;
  /* Stack the title and year chips vertically */
  flex-direction: column;
  /* Align to the start of the container so chips sit under the heading on the left */
  align-items: flex-start;
  /* Space between the header title and the year selector */
  gap: 0.5rem;
}

@media (max-width: 768px) {
  .header-title-group {
    gap: 0.75rem;
  }

  .header-title-group h1 {
    font-size: 1.25rem;
  }
}

/* ============================================== */
/* PT İNSİDENTİ FULL PAGE OVERLAY - PSV/ESD STYLE   */
/* ============================================== */

.pt-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #F4FAFB 0%, #E5F2F4 50%, #F4FAFB 100%);
  /* PERF: backdrop-filter silindi — fon tam qeyri-şəffafdır (blur görünmürdü).
     İnsident detal səhifəsi bu overlay-in ÜSTÜNDƏ açıldığından, iki qat
     backdrop-filter iç-içə hesablanır və detal səhifəsinin scroll-unu dondururdu. */
  z-index: 2000;
  display: none;
  overflow-y: auto;
}

.pt-overlay.visible {
  display: block;
}

.pt-overlay-content {
  max-width: 1600px;
  margin: 0 auto;
  padding: 2rem 2.5rem 4rem;
}

/* PT Header — Baypasetmə ilə eyni stil */
.pt-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(79, 124, 130, 0.2);
}

.pt-overlay-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.pt-overlay-title h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--winter-dark);
  margin: 0;
  letter-spacing: -0.015em;
}

.pt-level-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.85rem;
  border-radius: 18px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.pt-level-badge.level-1 { background: linear-gradient(135deg, #3A6B70, #2D5459); }
.pt-level-badge.level-2 { background: linear-gradient(135deg, #D4884A, #B87339); }
.pt-level-badge.level-3 { background: linear-gradient(135deg, #C45C5C, #A64B4B); }
.pt-level-badge.level-4 { background: linear-gradient(135deg, #7B68A8, #5E5082); }

.pt-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, var(--winter-medium), var(--winter-dark));
  color: #FFFFFF;
  border: none;
  padding: 0.45rem 0.95rem;
  border-radius: 9px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--apple-shadow-sm);
}

.pt-back-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--apple-shadow-md);
}

.pt-back-btn svg {
  width: 13px;
  height: 13px;
}

/* PT Stats Grid - Like PSV */
.pt-stats-grid {
  display: flex;
  align-items: stretch;
  gap: 0.65rem;
  margin-bottom: 1.15rem;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.pt-stat-card {
  background: linear-gradient(135deg, rgba(79, 124, 130, 0.08), rgba(79, 124, 130, 0.03));
  border: 1px solid rgba(79, 124, 130, 0.18);
  border-radius: 12px;
  padding: 0.75rem 1.1rem;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  min-width: 105px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  box-shadow: 0 1px 2px rgba(11, 46, 51, 0.04);
}

.pt-stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,0.5) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.pt-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(11, 46, 51, 0.08);
  border-color: rgba(79, 124, 130, 0.3);
}

.pt-stat-card:hover::before {
  opacity: 1;
}

.pt-stat-card:active {
  transform: translateY(-1px);
}

.pt-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--winter-dark);
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
}

.pt-stat-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--apple-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 1;
}

.pt-stat-card.ongoing {
  background: linear-gradient(135deg, rgba(212, 136, 74, 0.15), rgba(212, 136, 74, 0.05));
  border-color: rgba(212, 136, 74, 0.3);
}

.pt-stat-card.ongoing .pt-stat-value {
  color: var(--apple-orange);
}

.pt-stat-card.completed {
  background: linear-gradient(135deg, rgba(58, 107, 112, 0.15), rgba(58, 107, 112, 0.05));
  border-color: rgba(58, 107, 112, 0.3);
}

.pt-stat-card.completed .pt-stat-value {
  color: var(--apple-green);
}

.pt-stat-card.active {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(11, 46, 51, 0.12);
  border-width: 2px;
}
.pt-stat-card.active::before {
  opacity: 1;
}

/* PT Master-Detail Layout - YENİLƏNMİŞ: tək sütun, təbii hündürlük (sol panel gizlidir) */
.pt-master-detail {
  display: block;       /* flex deyil — sadə blok */
  height: auto;         /* calc(100vh - 200px) yerinə təbii */
  min-height: 0;
  gap: 0;
}

/* PT Left Panel - Filter List (gizli, amma stilləri saxlanır) */
.pt-master-panel {
  width: 300px;
  min-width: 300px;
  background: #FFFFFF;
  border: 1px solid rgba(79, 124, 130, 0.2);
  border-radius: 16px 0 0 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pt-master-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(79, 124, 130, 0.15);
  background: rgba(79, 124, 130, 0.03);
}

.pt-master-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--winter-dark);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}

.pt-filter-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.pt-filter-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
  border-bottom: 1px solid rgba(79, 124, 130, 0.08);
}

.pt-filter-item:hover {
  background: rgba(79, 124, 130, 0.05);
}

.pt-filter-item.active {
  background: rgba(79, 124, 130, 0.1);
  border-left-color: var(--winter-medium);
}

.pt-filter-name {
  font-weight: 600;
  color: var(--winter-dark);
  font-size: 0.9rem;
}

.pt-filter-item.active .pt-filter-name {
  color: var(--winter-medium);
}

.pt-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 0.5rem;
  background: rgba(79, 124, 130, 0.15);
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--winter-medium);
}

.pt-filter-item.active .pt-filter-count {
  background: var(--winter-medium);
  color: #FFFFFF;
}

/* PT Right Panel - Detail View — YENİLƏNMİŞ: tam radius, təbii hündürlük */
.pt-detail-panel {
  flex: 1;
  background: transparent;        /* fon təmiz */
  border: none;                    /* artıq border yox - kartlar standalone */
  border-radius: 0;
  display: block;                  /* flex column əvəzinə blok */
  overflow: visible;               /* daxili scroll yox */
  position: relative;
}

.pt-detail-header {
  padding: 1rem 1.25rem;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(79, 124, 130, 0.15);
  flex-shrink: 0;
}

.pt-detail-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pt-header-title-area {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.pt-detail-tag {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--winter-dark);
}

.pt-detail-type {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  background: var(--winter-medium);
  border-radius: 14px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #FFFFFF;
}

.pt-detail-count-box {
  text-align: right;
  flex-shrink: 0;
}

.pt-detail-count-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--winter-medium);
  line-height: 1;
}

.pt-detail-count-label {
  font-size: 0.7rem;
  color: var(--apple-text-secondary);
  margin-top: 0.15rem;
}

/* PT Cards Container */
.pt-cards-container {
  flex: 1;
  overflow: visible;        /* daxili scroll yox - tək body scroll qalır */
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* PT Preview Card - Horizontal Layout (kompakt) */
.pt-preview-card {
  display: flex;
  align-items: center;
  padding: 0.7rem 1.25rem;
  background: #FFFFFF;
  border: 1px solid rgba(79, 124, 130, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  gap: 1rem;
  box-shadow: 0 1px 2px rgba(11, 46, 51, 0.03);
  width: 100%;
  max-width: 100%;
}

.pt-preview-card:hover {
  background: #FFFFFF;
  border-color: rgba(79, 124, 130, 0.2);
  box-shadow: 0 4px 10px rgba(11, 46, 51, 0.07);
  transform: translateY(-1px);
}

.pt-preview-card.level-1 { border-left: 3px solid #3A6B70; }
.pt-preview-card.level-2 { border-left: 3px solid #D4884A; }
.pt-preview-card.level-3 { border-left: 3px solid #C45C5C; }
.pt-preview-card.level-4 { border-left: 3px solid #7B68A8; }

.pt-preview-left {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  padding: 0.45rem 0.7rem;
  background: linear-gradient(135deg, rgba(79, 124, 130, 0.08) 0%, rgba(79, 124, 130, 0.04) 100%);
  border-radius: 9px;
  border: 1px solid rgba(79, 124, 130, 0.1);
}

.pt-preview-date {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--winter-medium);
  text-align: center;
  white-space: nowrap;
}

.pt-preview-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
}

.pt-preview-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--apple-text-primary);
  line-height: 1.4;
}

.pt-preview-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.pt-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.55rem;
  background: rgba(79, 124, 130, 0.07);
  border: 1px solid rgba(79, 124, 130, 0.1);
  border-radius: 14px;
  font-size: 0.68rem;
  color: var(--apple-text-secondary);
}

.pt-meta-chip svg {
  width: 10px;
  height: 10px;
  color: var(--winter-medium);
}

.pt-preview-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.pt-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}

.pt-status-chip.ongoing {
  background: rgba(212, 136, 74, 0.13);
  color: var(--apple-orange);
}

.pt-status-chip.completed {
  background: rgba(58, 107, 112, 0.13);
  color: var(--apple-green);
}

.pt-status-chip svg {
  width: 11px;
  height: 11px;
}

.pt-preview-arrow {
  width: 16px;
  height: 16px;
  color: var(--apple-text-tertiary);
  transition: transform 0.2s ease;
}

.pt-preview-card:hover .pt-preview-arrow {
  transform: translateX(3px);
  color: var(--winter-medium);
}

/* PT Empty State */
.pt-detail-empty {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--apple-text-tertiary);
  padding: 4rem 2rem;
  z-index: 5;
  background: #FFFFFF;
  border: 1px solid rgba(79, 124, 130, 0.15);
  border-radius: 16px;
  margin-top: 0.5rem;
}

.pt-detail-empty svg {
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.pt-detail-empty p {
  font-size: 1rem;
  margin: 0;
}

/* PT Detail Modal - Modern Apple Style - Wide Horizontal */
.pt-detail-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 1.5rem;
}

.pt-detail-modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.pt-detail-modal {
  background: #FFFFFF;
  border-radius: 24px;
  width: 80%;
  max-width: 1200px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1);
  transform: scale(0.92) translateY(30px);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pt-detail-modal-overlay.visible .pt-detail-modal {
  transform: scale(1) translateY(0);
}

.pt-modal-header {
  padding: 1.75rem 2rem;
  color: #FFFFFF;
  position: relative;
}

.pt-modal-header.level-1 { background: linear-gradient(135deg, #3A6B70 0%, #2D5459 100%); }
.pt-modal-header.level-2 { background: linear-gradient(135deg, #D4884A 0%, #B87339 100%); }
.pt-modal-header.level-3 { background: linear-gradient(135deg, #C45C5C 0%, #A64B4B 100%); }
.pt-modal-header.level-4 { background: linear-gradient(135deg, #7B68A8 0%, #5E5082 100%); }

.pt-modal-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

.pt-modal-title-area {
  flex: 1;
}

.pt-modal-level {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
}

.pt-modal-name {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  letter-spacing: -0.01em;
}

.pt-modal-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  border-radius: 24px;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.pt-modal-status.ongoing {
  background: #F97316;
  color: #FFFFFF;
}

.pt-modal-status.completed {
  background: #22C55E;
  color: #FFFFFF;
}

.pt-modal-close {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 12px;
  padding: 0.6rem;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.pt-modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.pt-modal-close svg {
  width: 22px;
  height: 22px;
  color: #FFFFFF;
}

.pt-modal-body {
  padding: 1.75rem 2rem;
  overflow-y: auto;
  flex: 1;
  background: linear-gradient(180deg, rgba(184, 227, 233, 0.06) 0%, #FFFFFF 100%);
}

.pt-modal-section {
  background: #FFFFFF;
  border: 1px solid rgba(79, 124, 130, 0.12);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 8px rgba(11, 46, 51, 0.04);
}

.pt-modal-section:last-child {
  margin-bottom: 0;
}

.pt-modal-section-title {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--winter-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pt-modal-section-title svg {
  width: 16px;
  height: 16px;
}

.pt-modal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.pt-modal-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.pt-modal-field.full-width {
  grid-column: 1 / -1;
}

.pt-modal-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--apple-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pt-modal-value {
  font-size: 0.95rem;
  color: var(--winter-dark);
  line-height: 1.5;
}

.pt-modal-value.empty {
  color: var(--apple-text-tertiary);
  font-style: italic;
}

.pt-modal-value-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, rgba(79, 124, 130, 0.1), rgba(79, 124, 130, 0.05));
  border: 1px solid rgba(79, 124, 130, 0.12);
  border-radius: 12px;
  font-size: 0.9rem;
  color: var(--winter-dark);
  font-weight: 500;
}

.pt-modal-value-chip svg {
  width: 15px;
  height: 15px;
  color: var(--winter-medium);
}

.pt-modal-description {
  font-size: 0.95rem;
  color: var(--apple-text-primary);
  line-height: 1.7;
  white-space: pre-wrap;
}

.pt-modal-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, var(--winter-medium), var(--winter-dark));
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(11, 46, 51, 0.15);
}

.pt-modal-link-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(11, 46, 51, 0.25);
}

.pt-modal-link-btn svg {
  width: 18px;
  height: 18px;
}

/* Fəaliyyətlər Seksiyası - Apple Style */
.pt-activities-section {
  background: linear-gradient(135deg, rgba(79, 124, 130, 0.04) 0%, rgba(184, 227, 233, 0.08) 100%);
  border: 1px solid rgba(79, 124, 130, 0.15);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

.pt-activities-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.pt-activities-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--winter-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pt-activities-title svg {
  width: 18px;
  height: 18px;
}

.pt-activities-total {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: rgba(79, 124, 130, 0.12);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--winter-dark);
}

.pt-activities-total-count {
  font-size: 1.1rem;
  font-weight: 700;
}

.pt-activities-grid {
  display: flex;
  gap: 0.75rem;
}

.pt-activity-card {
  flex: 1;
  background: #FFFFFF;
  border: 1px solid rgba(79, 124, 130, 0.12);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.pt-activity-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
  opacity: 1;
}

.pt-activity-card.ongoing::before {
  background: var(--winter-medium);
}

.pt-activity-card.completed::before {
  background: var(--winter-dark);
}

.pt-activity-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px -4px rgba(11, 46, 51, 0.12);
  border-color: rgba(79, 124, 130, 0.2);
}

.pt-activity-card:active {
  transform: translateY(0);
}

.pt-activity-card-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.pt-activity-card-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pt-activity-card.ongoing .pt-activity-card-icon {
  background: rgba(79, 124, 130, 0.12);
  color: var(--winter-medium);
}

.pt-activity-card.completed .pt-activity-card-icon {
  background: rgba(11, 46, 51, 0.1);
  color: var(--winter-dark);
}

.pt-activity-card-icon svg {
  width: 16px;
  height: 16px;
}

.pt-activity-card-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pt-activity-card-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--apple-text-secondary);
}

.pt-activity-card-count {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.pt-activity-card.ongoing .pt-activity-card-count {
  color: var(--winter-medium);
}

.pt-activity-card.completed .pt-activity-card-count {
  color: var(--winter-dark);
}

.pt-activity-card-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(79, 124, 130, 0.06);
  border-radius: 6px;
  color: var(--winter-medium);
  transition: all 0.2s ease;
}

.pt-activity-card:hover .pt-activity-card-arrow {
  background: rgba(79, 124, 130, 0.12);
  transform: translateX(2px);
}

.pt-activity-card-arrow svg {
  width: 14px;
  height: 14px;
}

/* PT Action List Overlay */
.pt-action-list-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--apple-bg-primary);
  z-index: 10002;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}

.pt-action-list-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.pt-action-list-modal {
  background: transparent;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.pt-action-list-overlay.visible .pt-action-list-modal {
  transform: none;
}

.pt-action-list-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(79, 124, 130, 0.15);
  box-shadow: 0 2px 16px rgba(11, 46, 51, 0.06);
}

.pt-action-list-header.ongoing {
  background: linear-gradient(135deg, rgba(79, 124, 130, 0.1) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.pt-action-list-header.completed {
  background: linear-gradient(135deg, rgba(11, 46, 51, 0.08) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.pt-action-list-title-area {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pt-action-list-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.pt-action-list-badge.ongoing {
  background: var(--winter-medium);
  color: #FFFFFF;
}

.pt-action-list-badge.completed {
  background: var(--winter-dark);
  color: #FFFFFF;
}

.pt-action-list-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--winter-dark);
  letter-spacing: -0.02em;
}

.pt-action-list-close {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(79, 124, 130, 0.1);
  border: 1px solid rgba(79, 124, 130, 0.2);
  border-radius: 12px;
  padding: 0.65rem 1.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--winter-dark);
}

.pt-action-list-close:hover {
  background: rgba(79, 124, 130, 0.18);
  border-color: rgba(79, 124, 130, 0.35);
}

.pt-action-list-close svg {
  width: 18px;
  height: 18px;
  color: var(--winter-dark);
}

.pt-action-list-body {
  padding: 1.5rem 2rem;
  flex: 1;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 768px) {
  .pt-action-list-body {
    padding: 1rem;
    overflow-x: auto;
  }
}

/* PT Action Table Styles */
.pt-action-table-wrapper {
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid rgba(79, 124, 130, 0.12);
  overflow-x: auto;
  box-shadow: 0 2px 12px rgba(11, 46, 51, 0.06);
}

.pt-action-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  min-width: 900px;
}

.pt-action-table thead {
  background: linear-gradient(135deg, rgba(79, 124, 130, 0.1) 0%, rgba(79, 124, 130, 0.05) 100%);
}

.pt-action-table th {
  padding: 1rem 1.25rem;
  text-align: left;
  font-weight: 600;
  color: var(--winter-dark);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 2px solid rgba(79, 124, 130, 0.15);
  white-space: nowrap;
}

.pt-action-table tbody tr {
  transition: all 0.2s ease;
  border-bottom: 1px solid rgba(79, 124, 130, 0.08);
}

.pt-action-table tbody tr:last-child {
  border-bottom: none;
}

.pt-action-table tbody tr:hover {
  background: rgba(79, 124, 130, 0.04);
}

.pt-action-table td {
  padding: 1rem 1.25rem;
  color: var(--apple-text-primary);
  vertical-align: top;
}

.pt-action-table td:nth-child(2) {
  /* Fəaliyyət column - allow wrapping */
  max-width: 300px;
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.5;
}

.pt-action-table td:first-child {
  font-weight: 600;
  color: var(--winter-dark);
}

/* Winter Chill color scheme for status */
.pt-action-table .status-cell {
  font-weight: 600;
  font-size: 0.8rem;
}

.pt-action-table .status-cell.ongoing {
  color: var(--winter-medium);
}

.pt-action-table .status-cell.completed {
  color: var(--winter-dark);
}

/* Winter Chill color scheme for result */
.pt-action-table .result-cell {
  color: var(--apple-text-secondary);
  font-size: 0.8rem;
}

.pt-action-table .result-cell.overdue {
  color: var(--apple-red);
  font-weight: 500;
}

.pt-action-table .result-cell.remaining {
  color: var(--winter-medium);
}

.pt-action-list-empty {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--apple-text-tertiary);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  border: 1px solid rgba(79, 124, 130, 0.1);
}

.pt-action-list-empty svg {
  width: 64px;
  height: 64px;
  margin-bottom: 1.25rem;
  opacity: 0.4;
}

.pt-action-list-empty div {
  font-size: 1.1rem;
  font-weight: 500;
}

.pt-action-item {
  background: #FFFFFF;
  border: 1px solid rgba(79, 124, 130, 0.12);
  border-radius: 20px;
  padding: 1.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 2px 8px rgba(11, 46, 51, 0.04);
}

.pt-action-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px -8px rgba(11, 46, 51, 0.15);
  border-color: rgba(79, 124, 130, 0.25);
}

.pt-action-item:last-child {
  margin-bottom: 0;
}

.pt-action-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.pt-action-item-number {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--winter-dark);
  padding: 0.4rem 1rem;
  background: rgba(79, 124, 130, 0.1);
  border-radius: 10px;
  letter-spacing: -0.01em;
}

.pt-action-item-level {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
}

.pt-action-item-level.level-1 { background: rgba(48, 209, 88, 0.15); color: var(--apple-green); }
.pt-action-item-level.level-2 { background: rgba(255, 159, 10, 0.15); color: var(--apple-orange); }
.pt-action-item-level.level-3 { background: rgba(255, 69, 58, 0.15); color: var(--apple-red); }
.pt-action-item-level.level-4 { background: rgba(191, 90, 242, 0.15); color: var(--apple-purple); }

.pt-action-item-name {
  font-size: 1rem;
  color: var(--apple-text-primary);
  line-height: 1.6;
  font-weight: 500;
}

.pt-action-item-status {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: 20px;
}

.pt-action-item-status.ongoing {
  background: rgba(249, 115, 22, 0.15);
  color: #F97316;
}

.pt-action-item-status.completed {
  background: rgba(34, 197, 94, 0.15);
  color: #22C55E;
}

.pt-action-item-desc {
  font-size: 0.95rem;
  color: var(--apple-text-primary);
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.pt-action-item-meta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(79, 124, 130, 0.1);
}

.pt-action-item-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--apple-text-secondary);
  padding: 0.35rem 0.8rem;
  background: rgba(79, 124, 130, 0.06);
  border-radius: 8px;
}

.pt-action-item-meta-item svg {
  color: var(--winter-medium);
}

.pt-action-item-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  background: rgba(79, 124, 130, 0.08);
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--apple-text-secondary);
}

.pt-action-item-chip svg {
  width: 14px;
  height: 14px;
  color: var(--winter-medium);
}

/* Responsive for PT */
@media (max-width: 900px) {
  .pt-overlay-content {
    padding: 1rem;
  }

  .pt-master-detail {
    flex-direction: column;
    height: auto;
  }

  .pt-master-panel {
    /* Mobil-də də gizli qalır */
    display: none !important;
  }

  .pt-detail-panel {
    border: none;
    border-radius: 0;
    min-height: auto;
  }

  .pt-stats-grid {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .pt-stat-card {
    min-width: 0;
    flex: 1 1 calc(33% - 0.5rem);
    padding: 0.85rem 0.75rem;
  }

  .pt-stat-value { font-size: 1.5rem; }
  .pt-stat-label { font-size: 0.65rem; }

  .pt-modal-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pt-detail-modal {
    max-width: 95%;
    margin: 1rem;
  }

  .pt-modal-body {
    padding: 1.25rem;
  }
}

@media (max-width: 600px) {
  .pt-modal-grid {
    grid-template-columns: 1fr;
  }
}

/* PAO Table Column Widths - Specific sizing for better layout */
.pao-table th:nth-child(1),
.pao-table td:nth-child(1) {
  width: 90px;
  min-width: 90px;
}

.pao-table th:nth-child(2),
.pao-table td:nth-child(2) {
  width: auto;
  min-width: 200px;
}

.pao-table th:nth-child(3),
.pao-table td:nth-child(3) {
  width: auto;
  min-width: 180px;
}

.pao-table th:nth-child(4),
.pao-table td:nth-child(4) {
  width: 115px;
  min-width: 115px;
}

.pao-table th:nth-child(5),
.pao-table td:nth-child(5) {
  width: 110px;
  min-width: 110px;
}

.pao-table th:nth-child(6),
.pao-table td:nth-child(6) {
  width: 105px;
  min-width: 105px;
}

.pao-table th:nth-child(7),
.pao-table td:nth-child(7) {
  width: auto;
  min-width: 120px;
}

/* ========================================
   KPI CAROUSEL SYSTEM - QƏTİ STİLLƏR
   ======================================== */
.kpi-carousel-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 3rem;
  padding-bottom: 20px;
}

/* 1. Pəncərə (Çərçivə) */
.kpi-carousel-container {
  width: 100%;
  height: 750px;
  overflow: hidden;
  position: relative;
  background: transparent;
}

/* 2. Lent (Səhifələrin düzüldüyü uzun zolaq) */
#kpiCarousel,
.kpi-carousel {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease-in-out;
  will-change: transform;
}

/* 3. Səhifələr (Vagonlar) - ƏN VACİB HİSSƏ */
.kpi-carousel-page {
  min-width: 100% !important;
  width: 100% !important;
  flex: 0 0 100% !important;

  display: grid;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: repeat(2, 1fr) !important;
  gap: 15px;
  padding: 5px;
  box-sizing: border-box;
}

/* 8-dən artıq blok göstərilməsin - MÜTLƏQ QAYDA */
.kpi-carousel-page > .kpi-card:nth-child(n+9) {
  display: none !important;
}

/* Bypass kartı digərləri ilə eyni ölçüdə */
.bypass-stats-card,
#bypassStatsCard {
  width: auto !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
}

/* Bypass rəqəmi - digərləri ilə eyni stil */
#bypassStatsCard .kpi-main,
.bypass-stats-card .kpi-main,
#bypassKPICount {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--winter-dark) !important;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1400px) {
  .kpi-carousel-page {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
  }
  .kpi-carousel-container {
    height: 900px;
  }
}

@media (max-width: 1000px) {
  .kpi-carousel-page {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(4, 1fr) !important;
  }
  .kpi-carousel-container {
    height: 1100px;
  }
}

@media (max-width: 600px) {
  .kpi-carousel-page {
    grid-template-columns: 1fr !important;
  }
  .kpi-carousel-container {
    height: 1500px;
  }
}

.kpi-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(79, 124, 130, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  box-shadow: 0 4px 24px -8px rgba(11, 46, 51, 0.15);
}

.kpi-nav-arrow:hover {
  background: #FFFFFF;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 8px 32px -8px rgba(11, 46, 51, 0.25);
}

.kpi-nav-arrow.disabled {
  opacity: 0.3;
  pointer-events: none;
}

.kpi-nav-arrow svg {
  width: 20px;
  height: 20px;
  color: var(--winter-dark);
}

.kpi-nav-arrow.left { left: 0; }
.kpi-nav-arrow.right { right: 0; }

.kpi-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}

.kpi-carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(79, 124, 130, 0.25);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.kpi-carousel-dot:hover {
  background: rgba(79, 124, 130, 0.5);
  transform: scale(1.2);
}

.kpi-carousel-dot.active {
  background: var(--winter-medium);
}

@media (max-width: 1400px) {
  .kpi-carousel-page { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1000px) {
  .kpi-carousel-page { grid-template-columns: repeat(2, 1fr); }
  .kpi-carousel-container { padding: 0 2.5rem; }
  .kpi-nav-arrow { width: 40px; height: 40px; }
}

@media (max-width: 600px) {
  .kpi-carousel-page { grid-template-columns: 1fr; gap: 1.5rem; }
  .kpi-carousel-container { padding: 0; }
  .kpi-nav-arrow { display: none; }
}

/* ========================================
   BYPASS OVERLAY
   ======================================== */


/* Bypass Sənəd Linki Düyməsi - PT İnsidenti ilə eyni stil */


/* ============================================== */
/* SORA AUDIT HORIZONTAL SCROLL TIMELINE          */
/* ============================================== */

/* Scroll wrapper */


/* Horizontal track */

/* Yatay xətt — nöqtələrdən keçir */

/* Hər bir entry — nöqtə + kart */

/* Nöqtə */


.sora-h-dot.latest {
  background: linear-gradient(135deg, var(--winter-medium), var(--winter-dark));
  border-color: var(--winter-dark);
  width: 34px;
  height: 34px;
}


.sora-h-dot.latest svg {
  stroke: #fff;
}

/* Nöqtədən karta bağlayan kiçik xətt */


/* Kart */


.sora-h-card.latest {
  background: rgba(255,255,255,0.98);
  border-color: rgba(79,124,130,0.22);
  box-shadow: 0 4px 16px rgba(11,46,51,0.08);
}

/* Kartın yuxarı ox-u (nöqtəyə doğru) */

.sora-h-card.latest::before {
  border-bottom-color: rgba(79,124,130,0.22);
}

/* Tarix badge */

.sora-h-card:not(.latest) .sora-h-date {
  background: linear-gradient(135deg, var(--winter-light), var(--winter-medium));
}

/* SON badge */

/* Qeyd mətni */

/* Scroll hint — sağa sürüşdürün göstəricisi */


@keyframes soraScrollHintPulse {
  0%, 100% { transform: translateX(0); opacity: 0.5; }
  50% { transform: translateX(4px); opacity: 1; }
}

/* ============================================== */
/* SnSD DASHBOARD CARD — 4 Workstream (WS1–WS4)   */
/* Apple HIG / iOS estetikası                     */
/* ============================================== */

.snsd-dash-card {
  padding: 1.25rem 1.35rem 1.15rem !important;
}

.snsd-dash-header {
  flex-shrink: 0;
  margin-bottom: 0.75rem;
}

.snsd-dash-title {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--winter-dark);
  line-height: 1.1;
}

.snsd-dash-subtitle {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--apple-text-secondary);
  letter-spacing: 0.01em;
  margin-top: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.snsd-dash-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- Workstream sətri ---- */
.snsd-ws-row {
  flex: 1 1 0;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--snsd-ws-border, rgba(79, 124, 130, 0.18));
  background: linear-gradient(135deg, #FFFFFF 0%, var(--snsd-ws-tint, rgba(79, 124, 130, 0.04)) 100%);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.25s ease,
              background 0.25s ease;
  animation: slideInUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.snsd-ws-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px var(--snsd-ws-shadow, rgba(79, 124, 130, 0.28));
  border-color: var(--snsd-ws-border-hover, rgba(79, 124, 130, 0.38));
}

.snsd-ws-row:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.12s;
}

.snsd-ws-row:focus-visible {
  box-shadow: 0 0 0 3px var(--snsd-ws-tint, rgba(79, 124, 130, 0.18));
  border-color: var(--snsd-ws-accent, var(--winter-dark));
}

/* İkon dairəsi */
.snsd-ws-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--snsd-ws-icon-bg, rgba(79, 124, 130, 0.10));
  color: var(--snsd-ws-accent, var(--winter-dark));
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.snsd-ws-icon svg {
  width: 17px;
  height: 17px;
}

.snsd-ws-row:hover .snsd-ws-icon {
  transform: scale(1.08);
}

/* Mətn hissəsi */
.snsd-ws-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.snsd-ws-label {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--snsd-ws-accent, var(--winter-dark));
  line-height: 1;
}

.snsd-ws-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--apple-text-primary, #1D1D1F);
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Sağ ox düyməsi */
.snsd-ws-arrow {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1px solid var(--snsd-ws-border, rgba(79, 124, 130, 0.18));
  color: var(--snsd-ws-accent, var(--winter-dark));
  box-shadow: 0 2px 6px rgba(15, 40, 60, 0.06);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.25s ease,
              color 0.25s ease;
}

.snsd-ws-arrow svg {
  width: 12px;
  height: 12px;
}

.snsd-ws-row:hover .snsd-ws-arrow {
  transform: translateX(3px);
  background: var(--snsd-ws-accent, var(--winter-dark));
  color: #FFFFFF;
  border-color: transparent;
}

/* ---- Ton palitraları (şəkildəki kimi) ---- */
.snsd-ws-row.tone-blue {
  --snsd-ws-accent: #2F7CF6;
  --snsd-ws-tint: rgba(47, 124, 246, 0.05);
  --snsd-ws-icon-bg: rgba(47, 124, 246, 0.10);
  --snsd-ws-border: rgba(47, 124, 246, 0.22);
  --snsd-ws-border-hover: rgba(47, 124, 246, 0.45);
  --snsd-ws-shadow: rgba(47, 124, 246, 0.28);
}

.snsd-ws-row.tone-green {
  --snsd-ws-accent: #22A06B;
  --snsd-ws-tint: rgba(34, 160, 107, 0.05);
  --snsd-ws-icon-bg: rgba(34, 160, 107, 0.10);
  --snsd-ws-border: rgba(34, 160, 107, 0.22);
  --snsd-ws-border-hover: rgba(34, 160, 107, 0.45);
  --snsd-ws-shadow: rgba(34, 160, 107, 0.28);
}

.snsd-ws-row.tone-purple {
  --snsd-ws-accent: #7C5CF6;
  --snsd-ws-tint: rgba(124, 92, 246, 0.05);
  --snsd-ws-icon-bg: rgba(124, 92, 246, 0.10);
  --snsd-ws-border: rgba(124, 92, 246, 0.22);
  --snsd-ws-border-hover: rgba(124, 92, 246, 0.45);
  --snsd-ws-shadow: rgba(124, 92, 246, 0.28);
}

.snsd-ws-row.tone-orange {
  --snsd-ws-accent: #F5820D;
  --snsd-ws-tint: rgba(245, 130, 13, 0.05);
  --snsd-ws-icon-bg: rgba(245, 130, 13, 0.10);
  --snsd-ws-border: rgba(245, 130, 13, 0.22);
  --snsd-ws-border-hover: rgba(245, 130, 13, 0.45);
  --snsd-ws-shadow: rgba(245, 130, 13, 0.28);
}

/* Kiçik ekranlarda sətirlər öz təbii hündürlüyündə */
@media (max-width: 992px) {
  .snsd-ws-row { flex: 0 0 auto; min-height: 52px; }
}

/* ============================================== */
/* SnSD WORKSTREAM DETAL SƏHİFƏSİ (WS1–WS4)       */
/* Apple HIG · tam ekran overlay                  */
/* ============================================== */

.snsd-wsp {
  position: fixed;
  inset: 0;
  z-index: 3500;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(1100px 560px at 82% -6%, var(--wsp-a-glow, rgba(124, 92, 246, 0.07)), transparent 62%),
    linear-gradient(180deg, #F7F8FA 0%, #F2F4F7 55%, #EEF1F5 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.99) translateY(8px);
  transition: opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.44s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0.44s;
}

.snsd-wsp.show {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.snsd-wsp-inner {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 16px 32px 56px;
  box-sizing: border-box;
}

/* ---- Naviqasiya / geri düyməsi ---- */
.snsd-wsp-nav {
  padding: 2px 0 10px;
}

.snsd-wsp-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(20, 30, 45, 0.10);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 2px 10px rgba(15, 25, 40, 0.05);
  color: #1D1D1F;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease, background 0.25s ease;
}

.snsd-wsp-back svg { width: 15px; height: 15px; }
.snsd-wsp-back:hover { background: #FFFFFF; transform: translateX(-2px); box-shadow: 0 4px 16px rgba(15, 25, 40, 0.09); }
.snsd-wsp-back:active { transform: scale(0.97); }

/* ---- Hero ---- */
.snsd-wsp-hero {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(40px, 8vw, 120px);
  padding: 0 4px 22px;
}

.snsd-wsp-ws {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wsp-accent, #7C5CF6);
  animation: wspRise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.05s backwards;
}

.snsd-wsp-title {
  margin: 0.35rem 0 0;
  font-size: clamp(1.7rem, 3.4vw, 2.45rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: #16181D;
  animation: wspRise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.1s backwards;
}

.snsd-wsp-hero-art {
  flex-shrink: 0;
  width: clamp(160px, 18vw, 210px);
  animation: wspRise 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.14s backwards;
}

.snsd-wsp-hero-art svg { width: 100%; height: auto; display: block; }

.wsp-dot { animation: wspFloat 5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.wsp-dot.d2 { animation-delay: 0.8s; }
.wsp-dot.d3 { animation-delay: 1.6s; }
.wsp-dot.d4 { animation-delay: 2.4s; }
.wsp-dot.d5 { animation-delay: 3.2s; }

@keyframes wspFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

@keyframes wspRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Modul kartları ---- */
.snsd-wsp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 480px));
  justify-content: start;
  gap: 20px;
  margin-bottom: 0;
}

.snsd-wsp-card {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 24px;
  border-radius: 22px;
  border: 1px solid rgba(20, 30, 45, 0.07);
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(15, 25, 40, 0.04), 0 10px 30px -18px rgba(15, 25, 40, 0.14);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.25s ease;
  animation: wspRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.snsd-wsp-card:hover {
  transform: translateY(-4px);
  border-color: var(--wsp-a-line, rgba(124, 92, 246, 0.28));
  box-shadow: 0 2px 4px rgba(15, 25, 40, 0.04),
              0 22px 44px -20px var(--wsp-a-shadow, rgba(124, 92, 246, 0.35));
}

.snsd-wsp-card:active { transform: translateY(-1px) scale(0.985); transition-duration: 0.12s; }

.snsd-wsp-card:focus-visible {
  border-color: var(--wsp-accent, #7C5CF6);
  box-shadow: 0 0 0 3px var(--wsp-a-soft, rgba(124, 92, 246, 0.18));
}

.snsd-wsp-card-art {
  flex-shrink: 0;
  width: 104px;
  height: 104px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--wsp-a-soft, rgba(124, 92, 246, 0.10)) 0%, var(--wsp-a-glow, rgba(124, 92, 246, 0.05)) 100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.snsd-wsp-card-art svg { width: 76px; height: 76px; }
.snsd-wsp-card:hover .snsd-wsp-card-art { transform: scale(1.05) rotate(-1.5deg); }

.snsd-wsp-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.snsd-wsp-card-num {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--wsp-accent, #7C5CF6);
}

.snsd-wsp-card-title {
  font-size: 1.18rem;
  font-weight: 750;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: #16181D;
}

.snsd-wsp-card-level {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--wsp-accent, #7C5CF6);
  margin-top: 1px;
}

/* Bürünc / Gümüş kart variantları (WS4) */
.snsd-wsp-card--bronze .snsd-wsp-card-art {
  background: radial-gradient(circle at 50% 42%, rgba(240, 178, 107, 0.22) 0%, rgba(240, 178, 107, 0.07) 62%, rgba(240, 178, 107, 0.03) 100%);
  border-radius: 50%;
}

.snsd-wsp-card--silver {
  --wsp-accent: #6E7683;
  --wsp-a-soft: rgba(154, 163, 174, 0.16);
  --wsp-a-glow: rgba(154, 163, 174, 0.07);
  --wsp-a-line: rgba(154, 163, 174, 0.32);
  --wsp-a-shadow: rgba(120, 128, 140, 0.32);
}

.snsd-wsp-card--silver .snsd-wsp-card-art {
  background: radial-gradient(circle at 50% 42%, rgba(190, 197, 206, 0.28) 0%, rgba(190, 197, 206, 0.1) 62%, rgba(190, 197, 206, 0.04) 100%);
  border-radius: 50%;
}

.snsd-wsp-card--silver .snsd-wsp-card-level {
  color: #6E7683;
}

.snsd-wsp-card-arrow {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wsp-a-glow, rgba(124, 92, 246, 0.06));
  border: 1px solid var(--wsp-a-line, rgba(124, 92, 246, 0.22));
  color: var(--wsp-accent, #7C5CF6);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.25s ease, color 0.25s ease;
}

.snsd-wsp-card-arrow svg { width: 14px; height: 14px; }

.snsd-wsp-card:hover .snsd-wsp-card-arrow {
  transform: translateX(4px);
  background: var(--wsp-accent, #7C5CF6);
  color: #FFFFFF;
  border-color: transparent;
}

/* ---- Ton palitraları ---- */
.snsd-wsp.wsp-tone-blue {
  --wsp-accent: #2F7CF6;  --wsp-a-light: #7FB0FA;
  --wsp-a-soft: rgba(47, 124, 246, 0.12); --wsp-a-glow: rgba(47, 124, 246, 0.055);
  --wsp-a-line: rgba(47, 124, 246, 0.26); --wsp-a-shadow: rgba(47, 124, 246, 0.35);
}
.snsd-wsp.wsp-tone-green {
  --wsp-accent: #22A06B;  --wsp-a-light: #6ED0A4;
  --wsp-a-soft: rgba(34, 160, 107, 0.12); --wsp-a-glow: rgba(34, 160, 107, 0.055);
  --wsp-a-line: rgba(34, 160, 107, 0.26); --wsp-a-shadow: rgba(34, 160, 107, 0.35);
}
.snsd-wsp.wsp-tone-purple {
  --wsp-accent: #7C5CF6;  --wsp-a-light: #B29CFA;
  --wsp-a-soft: rgba(124, 92, 246, 0.12); --wsp-a-glow: rgba(124, 92, 246, 0.055);
  --wsp-a-line: rgba(124, 92, 246, 0.26); --wsp-a-shadow: rgba(124, 92, 246, 0.35);
}
.snsd-wsp.wsp-tone-orange {
  --wsp-accent: #F5820D;  --wsp-a-light: #FAB56A;
  --wsp-a-soft: rgba(245, 130, 13, 0.12); --wsp-a-glow: rgba(245, 130, 13, 0.055);
  --wsp-a-line: rgba(245, 130, 13, 0.26); --wsp-a-shadow: rgba(245, 130, 13, 0.35);
}

/* ---- Responsiv ---- */
@media (max-width: 860px) {
  .snsd-wsp-inner { padding: 14px 18px 44px; }
  .snsd-wsp-hero { flex-direction: column-reverse; align-items: flex-start; gap: 10px; padding-bottom: 20px; }
  .snsd-wsp-hero-art { width: 152px; align-self: flex-end; margin-top: -8px; }
  .snsd-wsp-grid { grid-template-columns: 1fr; gap: 14px; }
  .snsd-wsp-card { padding: 18px; gap: 16px; }
  .snsd-wsp-card-art { width: 84px; height: 84px; border-radius: 20px; }
  .snsd-wsp-card-art svg { width: 60px; height: 60px; }
  .snsd-wsp-card-title { font-size: 1.05rem; }
}

/* ============================================== */
/* SnSD MODULE - Apple Style Modern Design        */
/* Multi-page navigation with smooth transitions  */
/* ============================================== */

/* Base Page Container */

.snsd-page.visible {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Prevent main page flash during transitions */
.snsd-page.transitioning {
  display: block;
  opacity: 1;
  visibility: visible;
}


/* Universal Header */


/* ==================== */
/* PAGE 1: Groups List  */
/* ==================== */


/* Group Card - Apple Style */


/* Circular Progress */


.snsd-circular-progress .progress-bg {
  fill: none;
  stroke: rgba(79, 124, 130, 0.1);
  stroke-width: 6;
}

.snsd-circular-progress .progress-bar {
  fill: none;
  stroke: url(#snsdGradient);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ===================== */
/* PAGE 2: Group Detail  */
/* ===================== */

/* Stats Cards Row */


.snsd-stat-card.clickable::after {
  content: '→';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--winter-medium);
  font-size: 1.25rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.snsd-stat-card.clickable:hover::after {
  opacity: 1;
}


/* Section Title */


/* Participants List */

/* Participant Card */


/* Avatar with initials */


.snsd-participant-count.status-red {
  color: var(--status-red);
  background: var(--status-red-bg);
}
.snsd-participant-count.status-orange {
  color: var(--status-orange);
  background: var(--status-orange-bg);
}
.snsd-participant-count.status-green {
  color: var(--status-green);
  background: var(--status-green-bg);
}

/* Mini Circular Progress */


.snsd-mini-progress .progress-bg {
  fill: none;
  stroke: rgba(79, 124, 130, 0.1);
  stroke-width: 4;
}

.snsd-mini-progress .progress-bar {
  fill: none;
  stroke: var(--winter-medium);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s ease;
}

.snsd-mini-progress.status-red .progress-bar { stroke: var(--status-red); }
.snsd-mini-progress.status-orange .progress-bar { stroke: var(--status-orange); }
.snsd-mini-progress.status-green .progress-bar { stroke: var(--status-green); }

.snsd-mini-progress.status-red .snsd-mini-progress-value { color: var(--status-red); }
.snsd-mini-progress.status-orange .snsd-mini-progress-value { color: var(--status-orange); }
.snsd-mini-progress.status-green .snsd-mini-progress-value { color: var(--status-green); }


/* ========================== */
/* PAGE 3: Activities Stats   */
/* ========================== */


.snsd-activity-bar.status-red { background: linear-gradient(90deg, var(--status-red), #e66a6a); }
.snsd-activity-bar.status-orange { background: linear-gradient(90deg, var(--status-orange), #f0a050); }
.snsd-activity-bar.status-green { background: linear-gradient(90deg, var(--status-green), #48d17e); }


.snsd-activity-percent.status-red { color: var(--status-red); }
.snsd-activity-percent.status-orange { color: var(--status-orange); }
.snsd-activity-percent.status-green { color: var(--status-green); }

/* Activity item status indicator dot */
.snsd-activity-status-dot.status-red { background: var(--status-red); box-shadow: 0 0 6px var(--status-red-bg); }
.snsd-activity-status-dot.status-orange { background: var(--status-orange); box-shadow: 0 0 6px var(--status-orange-bg); }
.snsd-activity-status-dot.status-green { background: var(--status-green); box-shadow: 0 0 6px var(--status-green-bg); }

/* ============================== */
/* PAGE 4: Participant Detail     */
/* ============================== */


/* Task List */


.snsd-task-icon.completed {
  background: var(--status-green-bg);
  color: var(--status-green);
}

.snsd-task-icon.pending {
  background: var(--status-red-bg);
  color: var(--status-red);
}


.snsd-task-item.pending .snsd-task-name {
  color: var(--apple-text-secondary);
}


.snsd-task-status.completed {
  background: var(--status-green-bg);
  color: var(--status-green);
}

.snsd-task-status.pending {
  background: var(--status-red-bg);
  color: var(--status-red);
}

/* ============================== */
/* PAGE 5: Task Detail (Who did)  */
/* ============================== */


.snsd-task-detail-stat-value.completed {
  color: var(--status-green);
}

.snsd-task-detail-stat-value.pending {
  color: var(--status-red);
}


/* Tabs for Completed/Pending */


.snsd-task-tab.active {
  background: #fff;
  color: var(--winter-dark);
  box-shadow: 0 2px 8px rgba(11, 46, 51, 0.08);
}


.snsd-task-tab.active .snsd-task-tab-count {
  background: var(--winter-medium);
  color: #fff;
}

.snsd-task-tab.completed.active .snsd-task-tab-count {
  background: var(--status-green);
}

.snsd-task-tab.pending.active .snsd-task-tab-count {
  background: var(--status-red);
  color: #fff;
}

/* Person list in task detail */


.snsd-person-avatar.completed {
  background: linear-gradient(135deg, var(--status-green) 0%, #1e8449 100%);
}

.snsd-person-avatar.pending {
  background: linear-gradient(135deg, var(--status-red) 0%, #a93226 100%);
}


.snsd-person-status.completed {
  background: var(--status-green-bg);
  color: var(--status-green);
}

.snsd-person-status.pending {
  background: var(--status-red-bg);
  color: var(--status-red);
}

/* Empty state for person list */


/* Clickable activity item */


/* Loading & Empty States */


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


/* Responsive Design */


    /* ============================================== */
    /* MY TASKS OVERLAY - Mənim Tapşırıqlarım        */
    /* ============================================== */
    .mt-overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: linear-gradient(180deg, #F4FAFB 0%, #E8F4F5 50%, #F4FAFB 100%);
      z-index: 9999;
      display: none;
      overflow-y: auto;
      animation: fadeInMt 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    @keyframes fadeInMt {
      from { opacity: 0; transform: scale(0.98); }
      to { opacity: 1; transform: scale(1); }
    }
    .mt-overlay.visible { display: block; }

    .mt-content {
      max-width: 95%;
      width: 100%;
      margin: 0 auto;
      padding: 2rem 1.5rem 4rem;
      animation: slideInUp 0.5s cubic-bezier(0.32, 0.72, 0, 1);
    }

    .mt-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 2rem;
      flex-wrap: wrap;
      gap: 1rem;
      padding-bottom: 1.5rem;
      border-bottom: 1px solid rgba(79, 124, 130, 0.08);
    }

    .mt-title-area {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .mt-title {
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--winter-dark);
      margin: 0;
      letter-spacing: -0.03em;
    }

    .mt-back-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(79, 124, 130, 0.12);
      border-radius: 12px;
      padding: 0.625rem 1.25rem;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--winter-dark);
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .mt-back-btn:hover {
      background: rgba(255, 255, 255, 1);
      border-color: rgba(79, 124, 130, 0.2);
      transform: scale(1.03);
    }
    .mt-back-btn svg { width: 18px; height: 18px; }

    /* User identity banner */
    .mt-user-banner {
      display: flex;
      align-items: center;
      gap: 1.25rem;
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(16px);
      border-radius: 20px;
      padding: 1.5rem 2rem;
      margin-bottom: 1.5rem;
      border: 1px solid rgba(79,124,130,0.1);
      box-shadow: 0 4px 20px rgba(11,46,51,0.06);
    }
    .mt-user-avatar {
      width: 56px; height: 56px;
      border-radius: 50%;
      background: linear-gradient(135deg, #2E86AB, #1B4F72);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: 1px;
      flex-shrink: 0;
    }
    .mt-user-info {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }
    .mt-user-name {
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--winter-dark);
    }
    .mt-user-email {
      font-size: 0.85rem;
      color: var(--apple-text-tertiary);
    }
    .mt-user-match-info {
      font-size: 0.8rem;
      color: var(--apple-text-tertiary);
      margin-top: 0.15rem;
      font-style: italic;
    }

    /* Stats row */
    .mt-stats-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
      margin-bottom: 1.5rem;
    }
    .mt-stat-card {
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(12px);
      border-radius: 16px;
      padding: 1.25rem 1rem;
      text-align: center;
      border: 1px solid rgba(79,124,130,0.08);
      box-shadow: 0 2px 8px rgba(11,46,51,0.04);
      transition: transform 0.2s;
    }
    .mt-stat-card:hover { transform: translateY(-2px); }
    .mt-stat-value {
      font-size: 2rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1;
      margin-bottom: 0.35rem;
    }
    .mt-stat-value.total { color: var(--winter-dark); }
    .mt-stat-value.ongoing { color: var(--status-orange); }
    .mt-stat-value.completed { color: var(--status-green); }
    .mt-stat-value.overdue { color: var(--status-red); }
    .mt-stat-label {
      font-size: 0.78rem;
      font-weight: 500;
      color: var(--apple-text-tertiary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Filter bar */
    .mt-filter-bar {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1rem;
      flex-wrap: wrap;
      padding: 0.75rem 1rem;
      background: rgba(255,255,255,0.8);
      border-radius: 14px;
      border: 1px solid rgba(79,124,130,0.08);
    }
    .mt-filter-label {
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--apple-text-secondary);
      white-space: nowrap;
    }
    .mt-filter-select {
      padding: 0.45rem 0.75rem;
      border-radius: 10px;
      border: 1px solid rgba(79,124,130,0.2);
      background: rgba(255,255,255,0.95);
      font-size: 0.82rem;
      color: var(--apple-text-primary);
      font-weight: 500;
      cursor: pointer;
      outline: none;
      transition: border-color 0.2s;
    }
    .mt-filter-select:focus { border-color: var(--winter-medium); }
    .mt-filter-count {
      margin-left: auto;
      font-size: 0.8rem;
      color: var(--apple-text-tertiary);
      font-weight: 500;
    }

    /* Table */
    .mt-table-wrap {
      background: rgba(255,255,255,0.95);
      border-radius: 16px;
      border: 1px solid rgba(79,124,130,0.08);
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(11,46,51,0.05);
    }
    .mt-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.85rem;
    }
    .mt-table th {
      background: rgba(79,124,130,0.06);
      padding: 0.85rem 1rem;
      text-align: left;
      font-weight: 600;
      color: var(--apple-text-secondary);
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      border-bottom: 1px solid rgba(79,124,130,0.1);
      cursor: pointer;
      user-select: none;
      transition: background 0.2s;
      white-space: nowrap;
    }
    .mt-table th:hover { background: rgba(79,124,130,0.12); }
    .mt-table td {
      padding: 0.75rem 1rem;
      border-bottom: 1px solid rgba(79,124,130,0.05);
      color: var(--apple-text-primary);
      vertical-align: middle;
    }
    .mt-table tr:last-child td { border-bottom: none; }
    .mt-table tr:hover td { background: rgba(79,124,130,0.03); }

    /* Category badge */
    .mt-cat-badge {
      display: inline-block;
      padding: 0.2rem 0.55rem;
      border-radius: 6px;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }
    .mt-cat-badge.dio { background: rgba(46,134,171,0.12); color: #2E86AB; }
    .mt-cat-badge.pssr { background: rgba(142,68,173,0.12); color: #8E44AD; }
    .mt-cat-badge.ora { background: rgba(211,84,0,0.12); color: #D35400; }
    .mt-cat-badge.pt { background: rgba(39,174,96,0.12); color: #27AE60; }

    /* Status badge */
    .mt-status-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.25rem 0.65rem;
      border-radius: 100px;
      font-size: 0.75rem;
      font-weight: 600;
      white-space: nowrap;
    }
    .mt-status-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .mt-status-badge.ongoing { background: var(--status-orange-bg); color: var(--status-orange); border: 1px solid var(--status-orange-border); }
    .mt-status-badge.ongoing .mt-status-dot { background: var(--status-orange); }
    .mt-status-badge.completed { background: var(--status-green-bg); color: var(--status-green); border: 1px solid var(--status-green-border); }
    .mt-status-badge.completed .mt-status-dot { background: var(--status-green); }
    .mt-status-badge.overdue { background: var(--status-red-bg); color: var(--status-red); border: 1px solid var(--status-red-border); }
    .mt-status-badge.overdue .mt-status-dot { background: var(--status-red); }

    /* Days cell */
    .mt-days { font-weight: 600; font-size: 0.82rem; }
    .mt-days.positive { color: var(--status-green); }
    .mt-days.negative { color: var(--status-red); }
    .mt-days.today { color: var(--status-orange); }

    .mt-parent-name, .mt-activity-name {
      max-width: 220px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mt-notes-cell {
      max-width: 180px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Empty state */
    .mt-empty-state {
      text-align: center;
      padding: 3rem 1.5rem;
    }
    .mt-empty-icon {
      width: 80px; height: 80px;
      margin: 0 auto 1.25rem;
      background: rgba(79,124,130,0.08);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mt-empty-icon svg { width: 36px; height: 36px; color: var(--apple-text-tertiary); }
    .mt-empty-title {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--apple-text-primary);
      margin-bottom: 0.5rem;
    }
    .mt-empty-text {
      font-size: 0.9rem;
      color: var(--apple-text-tertiary);
      max-width: 400px;
      margin: 0 auto;
      line-height: 1.5;
    }

    /* No match info panel */
    .mt-no-match-panel {
      background: rgba(230,126,34,0.08);
      border: 1px solid rgba(230,126,34,0.2);
      border-radius: 14px;
      padding: 1.25rem 1.5rem;
      margin-bottom: 1.5rem;
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
    }
    .mt-no-match-panel svg { width: 22px; height: 22px; color: var(--status-orange); flex-shrink: 0; margin-top: 2px; }
    .mt-no-match-text { font-size: 0.88rem; color: var(--apple-text-secondary); line-height: 1.5; }
    .mt-no-match-text strong { color: var(--apple-text-primary); }

    /* ============================================== */
    /* MY TASKS - Profile Setup Modal                 */
    /* ============================================== */
    .mt-profile-modal-backdrop {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(11, 46, 51, 0.5);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: 10001;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: fadeInMt 0.3s ease;
    }
    .mt-profile-modal {
      background: #fff;
      border-radius: 24px;
      width: 480px;
      max-width: 92vw;
      max-height: 85vh;
      overflow: hidden;
      box-shadow: 0 32px 80px rgba(11, 46, 51, 0.25), 0 0 0 1px rgba(79, 124, 130, 0.1);
      animation: slideInUp 0.45s cubic-bezier(0.32, 0.72, 0, 1);
      display: flex;
      flex-direction: column;
    }
    .mt-pm-header {
      padding: 1.75rem 2rem 0;
      text-align: center;
    }
    .mt-pm-icon {
      width: 64px; height: 64px;
      border-radius: 50%;
      background: linear-gradient(135deg, #2E86AB, #1B4F72);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1rem;
    }
    .mt-pm-icon svg { width: 28px; height: 28px; color: #fff; }
    .mt-pm-title {
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--winter-dark);
      margin-bottom: 0.5rem;
    }
    .mt-pm-desc {
      font-size: 0.88rem;
      color: var(--apple-text-secondary);
      line-height: 1.5;
      margin-bottom: 1.25rem;
    }
    .mt-pm-body {
      padding: 0 2rem 1.5rem;
      overflow-y: auto;
      flex: 1;
    }
    .mt-pm-search-wrap {
      position: relative;
      margin-bottom: 0.75rem;
    }
    .mt-pm-search {
      width: 100%;
      padding: 0.75rem 1rem 0.75rem 2.75rem;
      border-radius: 14px;
      border: 2px solid rgba(79, 124, 130, 0.2);
      background: rgba(244, 250, 251, 0.8);
      font-size: 0.92rem;
      color: var(--apple-text-primary);
      outline: none;
      transition: border-color 0.25s, box-shadow 0.25s;
      font-family: inherit;
    }
    .mt-pm-search:focus {
      border-color: var(--winter-medium);
      box-shadow: 0 0 0 4px rgba(79, 124, 130, 0.12);
    }
    .mt-pm-search::placeholder { color: var(--apple-text-tertiary); }
    .mt-pm-search-icon {
      position: absolute;
      left: 0.85rem;
      top: 50%;
      transform: translateY(-50%);
      width: 18px; height: 18px;
      color: var(--apple-text-tertiary);
      pointer-events: none;
    }
    .mt-pm-results {
      max-height: 280px;
      overflow-y: auto;
      border-radius: 14px;
      border: 1px solid rgba(79, 124, 130, 0.1);
      background: rgba(244, 250, 251, 0.5);
    }
    .mt-pm-results:empty { display: none; }
    .mt-pm-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
      cursor: pointer;
      transition: background 0.15s;
      border-bottom: 1px solid rgba(79, 124, 130, 0.06);
    }
    .mt-pm-item:last-child { border-bottom: none; }
    .mt-pm-item:hover { background: rgba(79, 124, 130, 0.06); }
    .mt-pm-item.selected {
      background: rgba(46, 134, 171, 0.1);
      border-left: 3px solid #2E86AB;
    }
    .mt-pm-item-avatar {
      width: 38px; height: 38px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--winter-medium), var(--winter-dark));
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 0.78rem;
      font-weight: 700;
      flex-shrink: 0;
    }
    .mt-pm-item-info { flex: 1; min-width: 0; }
    .mt-pm-item-name {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--apple-text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mt-pm-item-dept {
      font-size: 0.78rem;
      color: var(--apple-text-tertiary);
    }
    .mt-pm-item-count {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--winter-medium);
      white-space: nowrap;
      background: rgba(79, 124, 130, 0.08);
      padding: 0.2rem 0.5rem;
      border-radius: 6px;
    }
    .mt-pm-hint {
      font-size: 0.78rem;
      color: var(--apple-text-tertiary);
      text-align: center;
      padding: 1rem 0.5rem;
      font-style: italic;
    }
    .mt-pm-footer {
      padding: 1rem 2rem 1.75rem;
      display: flex;
      gap: 0.75rem;
      border-top: 1px solid rgba(79, 124, 130, 0.08);
    }
    .mt-pm-btn {
      flex: 1;
      padding: 0.75rem 1.25rem;
      border-radius: 12px;
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
      border: none;
      transition: all 0.2s;
      font-family: inherit;
    }
    .mt-pm-btn-cancel {
      background: rgba(79, 124, 130, 0.08);
      color: var(--apple-text-secondary);
    }
    .mt-pm-btn-cancel:hover { background: rgba(79, 124, 130, 0.15); }
    .mt-pm-btn-save {
      background: linear-gradient(135deg, #2E86AB, #1B4F72);
      color: #fff;
      box-shadow: 0 4px 12px rgba(46, 134, 171, 0.3);
    }
    .mt-pm-btn-save:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(46, 134, 171, 0.4); }
    .mt-pm-btn-save:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }
    .mt-pm-selected-banner {
      display: none;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
      margin-bottom: 0.75rem;
      background: rgba(39, 174, 96, 0.08);
      border: 1px solid rgba(39, 174, 96, 0.2);
      border-radius: 12px;
    }
    .mt-pm-selected-banner.visible { display: flex; }
    .mt-pm-selected-banner svg { width: 18px; height: 18px; color: var(--status-green); flex-shrink: 0; }
    .mt-pm-selected-name {
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--apple-text-primary);
    }
    .mt-pm-change-btn {
      margin-left: auto;
      font-size: 0.78rem;
      color: var(--winter-medium);
      background: none;
      border: none;
      cursor: pointer;
      font-weight: 600;
      text-decoration: underline;
      font-family: inherit;
    }
    .mt-pm-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      padding: 2rem;
      color: var(--apple-text-tertiary);
      font-size: 0.9rem;
    }
    .mt-pm-spinner {
      width: 22px; height: 22px;
      border: 3px solid rgba(79, 124, 130, 0.15);
      border-top-color: var(--winter-medium);
      border-radius: 50%;
      animation: mtSpin 0.8s linear infinite;
    }
    @keyframes mtSpin { to { transform: rotate(360deg); } }

    /* ============================================== */
    /* TASK DETAIL & ADMIN REVIEW - FULL PAGE OVERLAY */
    /* Apple-Style Timeline Design                     */
    /* ============================================== */
    .mtd-overlay {
      position: fixed; top:0;left:0;right:0;bottom:0;
      background: linear-gradient(180deg, #F4FAFB 0%, #E5F2F4 50%, #F4FAFB 100%);
      /* PERF: backdrop-filter silindi — fon onsuz da tam qeyri-şəffafdır (blur görünmürdü),
         amma scroll konteynerdə backdrop-filter kompozit (GPU) scroll-u söndürərək
         hər kadrda arxa planın yenidən blur edilməsinə səbəb olurdu → scroll donması */
      z-index: 10002;
      display: block;
      overflow-y: auto;
      animation: fadeInMt 0.35s cubic-bezier(0.4,0,0.2,1);
    }
    .mtd-page {
      width: 100%;
      margin: 0;
      padding: 1.5rem clamp(1.25rem, 3vw, 3rem) 4rem;
      animation: slideInUp 0.5s cubic-bezier(0.32,0.72,0,1);
    }

    /* ===== HEADER / TOP BAR ===== */
    .mtd-topbar {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 1.5rem; padding: 0.5rem 0 0;
    }
    .mtd-topbar-title {
      display: none; /* Hidden - we use breadcrumb pill instead */
    }
    .mtd-crumb-pill {
      display: inline-flex; align-items: center; gap: 0.45rem;
      padding: 0.4rem 0.85rem 0.4rem 0.6rem;
      background: rgba(255,255,255,0.88); /* PERF: backdrop-filter silindi, opacity artırıldı */
      border: 1px solid rgba(79,124,130,0.14);
      border-radius: 999px;
      font-size: 0.78rem; font-weight: 600;
      color: var(--apple-text-secondary);
      letter-spacing: 0.01em;
    }
    .mtd-crumb-pill svg { width: 14px; height: 14px; color: var(--winter-medium); }
    .mtd-back-btn {
      display: inline-flex; align-items: center; gap: 0.45rem;
      background: rgba(255,255,255,0.92); /* PERF: backdrop-filter silindi */
      border: 1px solid rgba(79,124,130,0.14); border-radius: 999px;
      padding: 0.55rem 1.1rem; font-size: 0.82rem; font-weight: 600;
      color: var(--winter-dark); cursor: pointer; transition: all 0.25s;
      font-family: inherit; text-decoration: none;
    }
    .mtd-back-btn:hover { background: #fff; border-color: rgba(79,124,130,0.3); transform: translateX(-2px); box-shadow: 0 4px 14px rgba(11,46,51,0.08); }
    .mtd-back-btn svg { width: 16px; height: 16px; }

    /* ===== HERO SECTION ===== */
    .mtd-hero {
      margin-bottom: 1.75rem;
      padding: 0 0.25rem;
      animation: slideInUp 0.55s cubic-bezier(0.32,0.72,0,1) 0.05s backwards;
    }
    .mtd-hero-cat {
      display: inline-flex; align-items: center; gap: 0.4rem;
      padding: 0.32rem 0.8rem 0.32rem 0.55rem;
      background: rgba(255,255,255,0.82); /* PERF: backdrop-filter silindi */
      border: 1px solid rgba(79,124,130,0.12);
      border-radius: 8px; margin-bottom: 0.9rem;
      font-size: 0.74rem; font-weight: 600;
      color: var(--apple-text-secondary); letter-spacing: 0.02em;
    }
    .mtd-hero-cat svg { width: 13px; height: 13px; color: var(--winter-medium); }
    .mtd-hero-title {
      font-size: 2.5rem; font-weight: 800;
      color: var(--winter-dark);
      line-height: 1.15; letter-spacing: -0.028em;
      margin-bottom: 1.1rem;
      word-break: break-word;
      max-width: 960px;
    }
    .mtd-hero-chips { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
    .mtd-hero-chip {
      display: inline-flex; align-items: center; gap: 0.4rem;
      padding: 0.42rem 0.85rem; border-radius: 999px;
      font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em;
    }
    .mtd-hero-chip svg { width: 14px; height: 14px; }
    .mtd-hero-chip.priority-high {
      background: linear-gradient(135deg, rgba(220,53,69,0.12), rgba(220,53,69,0.06));
      color: #A93226;
      border: 1px solid rgba(220,53,69,0.22);
    }
    .mtd-hero-chip.priority-medium {
      background: linear-gradient(135deg, rgba(230,126,34,0.14), rgba(230,126,34,0.06));
      color: #B9621A;
      border: 1px solid rgba(230,126,34,0.22);
    }
    .mtd-hero-chip.priority-done {
      background: linear-gradient(135deg, rgba(39,174,96,0.14), rgba(39,174,96,0.06));
      color: #1E8449;
      border: 1px solid rgba(39,174,96,0.22);
    }
    .mtd-hero-chip.date-chip {
      background: rgba(255,255,255,0.9); /* PERF: backdrop-filter silindi */
      border: 1px solid rgba(79,124,130,0.15);
      color: var(--apple-text-secondary);
    }

    /* ===== TIME SPENT CARD (Countdown-style hero card) ===== */
    .mtd-time-card {
      position: relative; overflow: hidden;
      background:
        linear-gradient(135deg, rgba(184,227,233,0.55) 0%, rgba(184,227,233,0.22) 100%),
        #FFFFFF;
      border: 1px solid rgba(79,124,130,0.14);
      border-radius: 18px;
      padding: 1.1rem 1.3rem;
      margin-bottom: 1.5rem;
      display: flex; align-items: center; justify-content: space-between;
      gap: 1rem;
      box-shadow: 0 4px 20px rgba(11,46,51,0.06);
      animation: slideInUp 0.55s cubic-bezier(0.32,0.72,0,1) 0.1s backwards;
    }
    .mtd-time-card::after {
      content: ''; position: absolute;
      top: -40%; right: -20%;
      width: 260px; height: 260px;
      background: radial-gradient(circle, rgba(79,124,130,0.12) 0%, transparent 65%);
      pointer-events: none;
    }
    .mtd-time-left { display: flex; align-items: center; gap: 0.85rem; position: relative; z-index: 1; }
    .mtd-time-icon {
      width: 42px; height: 42px; border-radius: 12px;
      background: linear-gradient(135deg, var(--winter-dark), var(--winter-medium));
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 14px rgba(11,46,51,0.22);
      flex-shrink: 0;
    }
    .mtd-time-icon svg { width: 22px; height: 22px; color: #fff; }
    .mtd-time-label {
      font-size: 0.73rem; font-weight: 600;
      color: var(--apple-text-tertiary);
      text-transform: uppercase; letter-spacing: 0.06em;
      margin-bottom: 0.15rem;
    }
    .mtd-time-title {
      font-size: 0.92rem; font-weight: 700; color: var(--winter-dark);
    }
    .mtd-time-right {
      display: flex; align-items: center; gap: 0.5rem; position: relative; z-index: 1;
    }
    .mtd-time-value {
      font-size: 1.35rem; font-weight: 800;
      color: var(--winter-dark); letter-spacing: -0.02em;
      font-variant-numeric: tabular-nums;
    }
    .mtd-time-value.overdue { color: #C0392B; }
    .mtd-time-info {
      width: 22px; height: 22px; border-radius: 50%;
      background: rgba(79,124,130,0.12);
      display: flex; align-items: center; justify-content: center;
      cursor: help; transition: background 0.2s;
    }
    .mtd-time-info:hover { background: rgba(79,124,130,0.22); }
    .mtd-time-info svg { width: 12px; height: 12px; color: var(--winter-medium); }

    /* ===== SECTION (generic card) ===== */
    .mtd-section {
      /* PERF: backdrop-filter blur(18px) silindi — səhifədəki hər böyük kart scroll
         zamanı arxasını hər kadrda yenidən blur etdirirdi (əsas donma səbəbi).
         Arxa fon overlay-in öz hamar gradientidir, ona görə blur vizual fərq vermirdi.
         Frosted görünüşü qorumaq üçün opacity 0.82 → 0.94 artırıldı. */
      background: rgba(255,255,255,0.94);
      border: 1px solid rgba(79,124,130,0.09);
      border-radius: 20px;
      padding: 1.5rem 1.5rem 1.65rem;
      margin-bottom: 1.25rem;
      box-shadow: 0 3px 18px rgba(11,46,51,0.04);
      animation: slideInUp 0.55s cubic-bezier(0.32,0.72,0,1) backwards;
    }
    .mtd-section.delay-1 { animation-delay: 0.15s; }
    .mtd-section.delay-2 { animation-delay: 0.2s; }
    .mtd-section.delay-3 { animation-delay: 0.25s; }
    .mtd-section-heading {
      font-size: 1rem; font-weight: 700;
      color: var(--winter-dark);
      margin-bottom: 0.85rem;
      letter-spacing: -0.01em;
    }
    .mtd-section-heading-wrap {
      display: flex; align-items: center; justify-content: space-between;
      gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
    }
    .mtd-section-heading-wrap .mtd-section-heading { margin-bottom: 0; }
    .mtd-section-sub {
      font-size: 0.8rem; color: var(--apple-text-tertiary);
      font-weight: 500;
    }

    /* ===== PROGRESS TIMELINE (elapsed time toward deadline) ===== */
    .mtd-prog {
      padding: 0.5rem 0.25rem 0.25rem;
    }
    .mtd-prog-stats {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 1.5rem; align-items: end;
      margin-bottom: 1.5rem;
    }
    .mtd-prog-stat-block {
      display: flex; flex-direction: column; gap: 0.2rem;
    }
    .mtd-prog-stat-block.right { align-items: flex-end; text-align: right; }
    .mtd-prog-stat-label {
      font-size: 0.7rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--apple-text-tertiary);
    }
    .mtd-prog-stat-date {
      font-size: 1.05rem; font-weight: 700;
      color: var(--winter-dark);
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.005em;
    }
    .mtd-prog-countdown {
      text-align: center;
      padding: 0.5rem 1.15rem;
      background: linear-gradient(135deg, rgba(184,227,233,0.55) 0%, rgba(184,227,233,0.18) 100%);
      border: 1px solid rgba(79,124,130,0.18);
      border-radius: 14px;
      min-width: 180px;
    }
    .mtd-prog-countdown.overdue {
      background: linear-gradient(135deg, rgba(220,53,69,0.18) 0%, rgba(220,53,69,0.06) 100%);
      border-color: rgba(220,53,69,0.28);
    }
    .mtd-prog-countdown.done {
      background: linear-gradient(135deg, rgba(39,174,96,0.2) 0%, rgba(39,174,96,0.06) 100%);
      border-color: rgba(39,174,96,0.28);
    }
    .mtd-prog-countdown.elapsed {
      background: linear-gradient(135deg, rgba(94,123,130,0.18) 0%, rgba(94,123,130,0.06) 100%);
      border-color: rgba(94,123,130,0.24);
    }
    .mtd-prog-count-label {
      font-size: 0.68rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.06em;
      color: var(--apple-text-secondary);
      margin-bottom: 0.15rem;
    }
    .mtd-prog-countdown.overdue .mtd-prog-count-label { color: #C0392B; }
    .mtd-prog-countdown.done .mtd-prog-count-label { color: #1E8449; }
    .mtd-prog-count-value {
      font-size: 1.35rem; font-weight: 800;
      color: var(--winter-dark);
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
      line-height: 1.1;
    }
    .mtd-prog-countdown.overdue .mtd-prog-count-value { color: #A93226; }
    .mtd-prog-countdown.done .mtd-prog-count-value { color: #1E8449; }

    /* Horizontal progress bar */
    .mtd-prog-bar-wrap {
      position: relative;
      padding: 0.2rem 0 2rem;
    }
    .mtd-prog-bar {
      position: relative;
      height: 8px;
      background: rgba(79,124,130,0.1);
      border-radius: 999px;
      overflow: visible;
    }
    .mtd-prog-bar-fill {
      position: absolute;
      top: 0; left: 0; bottom: 0;
      background: linear-gradient(90deg, var(--winter-medium), var(--winter-dark));
      border-radius: 999px;
      transition: width 0.6s cubic-bezier(0.32,0.72,0,1);
      box-shadow: 0 0 12px rgba(79,124,130,0.35);
    }
    .mtd-prog-bar-fill.overdue {
      background: linear-gradient(90deg, #E67E22, #C0392B);
      box-shadow: 0 0 12px rgba(220,53,69,0.4);
    }
    .mtd-prog-bar-fill.done {
      background: linear-gradient(90deg, #27AE60, #1E8449);
      box-shadow: 0 0 12px rgba(39,174,96,0.4);
    }
    /* Start & end dots */
    .mtd-prog-dot {
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 14px; height: 14px; border-radius: 50%;
      background: #fff;
      border: 3px solid var(--winter-medium);
      z-index: 2;
    }
    .mtd-prog-dot.start { left: 0; transform: translate(-50%, -50%); }
    .mtd-prog-dot.end { right: 0; transform: translate(50%, -50%); }
    .mtd-prog-dot.end.overdue { border-color: #C0392B; }
    .mtd-prog-dot.end.done { border-color: #1E8449; background: #1E8449; }
    /* "Now" marker - current position on the line */
    .mtd-prog-now {
      position: absolute; top: 50%;
      width: 20px; height: 20px; border-radius: 50%;
      background: #fff;
      border: 4px solid var(--winter-dark);
      transform: translate(-50%, -50%);
      z-index: 3;
      box-shadow: 0 2px 10px rgba(11,46,51,0.25);
      animation: progPulse 2.4s ease-in-out infinite;
    }
    .mtd-prog-now.overdue {
      border-color: #C0392B;
      box-shadow: 0 2px 10px rgba(220,53,69,0.35);
    }
    @keyframes progPulse {
      0%, 100% { box-shadow: 0 2px 10px rgba(11,46,51,0.25), 0 0 0 0 rgba(11,46,51,0.3); }
      50% { box-shadow: 0 2px 10px rgba(11,46,51,0.25), 0 0 0 10px rgba(11,46,51,0); }
    }
    /* Now label below the marker */
    .mtd-prog-now-label {
      position: absolute;
      top: calc(50% + 18px);
      transform: translateX(-50%);
      font-size: 0.72rem; font-weight: 700;
      color: var(--winter-dark);
      white-space: nowrap;
      padding: 0.2rem 0.55rem;
      background: rgba(255,255,255,0.9);
      border: 1px solid rgba(79,124,130,0.15);
      border-radius: 6px;
      letter-spacing: 0.01em;
    }
    /* Progress percentage badge */
    .mtd-prog-pct {
      display: inline-flex; align-items: center; gap: 0.4rem;
      padding: 0.3rem 0.7rem;
      background: rgba(79,124,130,0.1);
      border-radius: 999px;
      font-size: 0.78rem; font-weight: 700;
      color: var(--winter-dark);
      font-variant-numeric: tabular-nums;
    }
    .mtd-prog-pct.overdue { background: rgba(220,53,69,0.12); color: #A93226; }
    .mtd-prog-pct.done { background: rgba(39,174,96,0.12); color: #1E8449; }
    .mtd-prog-pct svg { width: 13px; height: 13px; }

    /* Empty state for progress */
    .mtd-prog-empty {
      text-align: center;
      padding: 1.5rem 1rem;
      color: var(--apple-text-tertiary);
      font-size: 0.88rem;
    }
    .mtd-prog-empty svg { width: 32px; height: 32px; margin-bottom: 0.5rem; opacity: 0.5; }

    /* ===== DESCRIPTION ===== */
    .mtd-desc-body {
      font-size: 0.92rem; line-height: 1.65;
      color: var(--apple-text-secondary);
    }
    .mtd-desc-body p { margin-bottom: 0.6rem; }
    .mtd-desc-body p:last-child { margin-bottom: 0; }

    /* ═══════════════════════════════════════════════════════════
       INFO CARDS — White card containers with pastel pill inside
       Compact, refined proportions matching the reference exactly.
       ═══════════════════════════════════════════════════════════ */
    .mtd-info-card {
      background: transparent;
      padding: 0;
      border: none;
      box-shadow: none;
      margin-bottom: 1.25rem;
      animation: slideInUp 0.55s cubic-bezier(0.32,0.72,0,1) 0.15s backwards;
    }
    .mtd-info-badges { display: none; }
    .mtd-info-title { display: none; }
    .mtd-info-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 0.85rem;
    }
    /* OUTER CARD — white container, compact */
    .mtd-info-cell {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.7rem;
      background: #FFFFFF;
      border: 1px solid rgba(11, 46, 51, 0.06);
      border-radius: 14px;
      box-shadow: 0 1px 2px rgba(11, 46, 51, 0.03);
      transition: transform .22s cubic-bezier(0.22, 1, 0.36, 1),
                  box-shadow .22s ease,
                  border-color .22s ease;
      min-width: 0;
      overflow: hidden;
    }
    .mtd-info-cell:hover {
      transform: translateY(-1px);
      box-shadow: 0 3px 10px rgba(11, 46, 51, 0.05);
      border-color: rgba(11, 46, 51, 0.1);
    }

    /* Hide icon (no icon in reference) */
    .mtd-info-cell-icon { display: none; }

    /* INNER container — transparent, data sits directly on white card */
    .mtd-info-cell-body {
      width: 100%;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 0.45rem;
      padding: 0.5rem 0.75rem;
      background: transparent;
      text-align: center;
    }

    .mtd-info-label {
      font-size: 0.625rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      color: #6B7780;
    }
    .mtd-info-value {
      font-size: 1.05rem;
      font-weight: 800;
      color: #0D2A30;
      word-break: break-word;
      overflow-wrap: anywhere;
      line-height: 1.25;
      letter-spacing: -0.02em;
      font-variant-numeric: tabular-nums;
    }
    /* Long-text variant — for "Əsas sənəd" descriptions */
    .mtd-info-value.is-long {
      font-size: 0.78rem;
      font-weight: 600;
      line-height: 1.5;
      letter-spacing: -0.005em;
      color: #1A3A40;
    }

    /* ───── STATUS COLOUR VARIANTS — whole card tinted softly ───── */
    /* Tamamlanıb / Bitib — Green */
    .mtd-info-cell.status-done {
      background: #EEF6F0;
      border-color: rgba(58, 123, 83, 0.18);
    }
    .mtd-info-cell.status-done .mtd-info-label { color: #3A7B53; }
    .mtd-info-cell.status-done .mtd-info-value { color: #1A5C36; }

    /* Gecikir — Red */
    .mtd-info-cell.status-overdue {
      background: #FCEFEF;
      border-color: rgba(162, 69, 69, 0.18);
    }
    .mtd-info-cell.status-overdue .mtd-info-label { color: #A24545; }
    .mtd-info-cell.status-overdue .mtd-info-value { color: #7A2727; }

    /* İcrada — Yellow / Amber */
    .mtd-info-cell.status-ongoing {
      background: #FDF7E5;
      border-color: rgba(147, 112, 27, 0.2);
    }
    .mtd-info-cell.status-ongoing .mtd-info-label { color: #93701B; }
    .mtd-info-cell.status-ongoing .mtd-info-value { color: #6B4F0E; }

    /* ===== TABS (Timeline / Request) ===== */
    .mtd-tabs-wrap {
      display: flex; align-items: center; gap: 0;
      border-bottom: 1.5px solid rgba(79,124,130,0.1);
      margin-bottom: 1.35rem;
      padding: 0 0.25rem;
    }
    .mtd-tab-btn {
      position: relative;
      background: transparent; border: none;
      padding: 0.7rem 0.25rem;
      margin-right: 1.4rem;
      font-family: inherit; font-size: 0.92rem; font-weight: 600;
      color: var(--apple-text-tertiary);
      cursor: pointer; transition: color 0.2s;
    }
    .mtd-tab-btn.active { color: var(--winter-dark); }
    .mtd-tab-btn::after {
      content: ''; position: absolute;
      left: 0; right: 0; bottom: -1.5px; height: 2px;
      background: var(--winter-dark);
      border-radius: 2px 2px 0 0;
      transform: scaleX(0); transform-origin: center;
      transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
    }
    .mtd-tab-btn.active::after { transform: scaleX(1); }
    .mtd-tab-count {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 20px; height: 20px; padding: 0 0.4rem;
      margin-left: 0.4rem; border-radius: 999px;
      background: rgba(79,124,130,0.12);
      font-size: 0.68rem; font-weight: 700;
      color: var(--apple-text-secondary);
      vertical-align: middle;
    }
    .mtd-tab-btn.active .mtd-tab-count { background: var(--winter-dark); color: #fff; }
    .mtd-tab-panel { display: none; animation: fadeInMt 0.3s; }
    .mtd-tab-panel.active { display: block; }

    /* ====== ATTACHMENTS (reference-image style list) ====== */
    .mtd-attach-list {
      display: flex; flex-direction: column; gap: 0.55rem;
    }
    .mtd-attach-row {
      display: flex; align-items: center; gap: 0.85rem;
      padding: 0.7rem 0.85rem;
      background: rgba(244,250,251,0.55);
      border: 1px solid rgba(79,124,130,0.08);
      border-radius: 14px;
      transition: all 0.22s;
    }
    .mtd-attach-row:hover {
      background: #fff; border-color: rgba(79,124,130,0.2);
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(11,46,51,0.06);
    }
    .mtd-attach-icon {
      width: 38px; height: 38px; border-radius: 11px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .mtd-attach-icon svg { width: 18px; height: 18px; }
    .mtd-attach-icon.type-doc { background: linear-gradient(135deg, rgba(184,107,123,0.22), rgba(184,107,123,0.1)); color: #8E4858; }
    .mtd-attach-icon.type-pdf { background: linear-gradient(135deg, rgba(94,123,130,0.25), rgba(94,123,130,0.1)); color: #3D5A5F; }
    .mtd-attach-icon.type-img { background: linear-gradient(135deg, rgba(212,136,74,0.22), rgba(212,136,74,0.1)); color: #B9621A; }
    .mtd-attach-icon.type-xls { background: linear-gradient(135deg, rgba(39,174,96,0.22), rgba(39,174,96,0.1)); color: #1E8449; }
    .mtd-attach-body { flex: 1; min-width: 0; }
    .mtd-attach-name {
      font-size: 0.9rem; font-weight: 700;
      color: var(--winter-dark);
      margin-bottom: 0.18rem;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .mtd-attach-meta {
      display: inline-flex; align-items: center; gap: 0.35rem;
      font-size: 0.74rem; color: var(--apple-text-tertiary); font-weight: 500;
    }
    .mtd-attach-meta svg { width: 12px; height: 12px; }
    .mtd-attach-actions {
      display: flex; align-items: center; gap: 0.9rem; flex-shrink: 0;
    }
    .mtd-attach-act {
      display: inline-flex; align-items: center; gap: 0.3rem;
      background: none; border: none;
      padding: 0.3rem 0.1rem;
      font-size: 0.8rem; font-weight: 600;
      color: var(--apple-text-secondary);
      cursor: pointer; transition: color 0.18s;
      font-family: inherit; text-decoration: none;
    }
    .mtd-attach-act:hover { color: var(--winter-dark); }
    .mtd-attach-act svg { width: 14px; height: 14px; }

    /* ====== TIMELINE ====== */
    .mtd-tl-section { /* legacy wrapper - now just a spacer */ }
    .mtd-tl-section-title { display: none; }

    .mtd-tl-track { position: relative; padding-left: 3rem; margin-left: 0.6rem; }
    .mtd-tl-track::before {
      content: ''; position: absolute;
      left: 0; top: 0.4rem; bottom: 0.4rem; width: 2px;
      background: linear-gradient(180deg, rgba(79,124,130,0.28) 0%, rgba(79,124,130,0.06) 100%);
      border-radius: 2px;
    }

    .mtd-tl-node {
      position: relative;
      padding-bottom: 1.4rem;
      animation: slideInUp 0.4s cubic-bezier(0.32,0.72,0,1) backwards;
    }
    .mtd-tl-node:last-child { padding-bottom: 0; }
    .mtd-tl-node:nth-child(1) { animation-delay: 0s; }
    .mtd-tl-node:nth-child(2) { animation-delay: 0.08s; }
    .mtd-tl-node:nth-child(3) { animation-delay: 0.16s; }

    .mtd-tl-year { display: none; }

    .mtd-tl-icon {
      position: absolute; left: -3rem; top: 0.15rem;
      width: 34px; height: 34px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      z-index: 1;
      margin-left: -16px;
      border: 3px solid #fff;
    }
    .mtd-tl-icon svg { width: 14px; height: 14px; color: #fff; }
    .mtd-tl-icon.created { background: linear-gradient(135deg, var(--winter-medium), var(--winter-dark)); }
    .mtd-tl-icon.pending {
      background: linear-gradient(135deg, #F39C12, #E67E22);
      animation: tlPulse 2s ease-in-out infinite;
    }
    .mtd-tl-icon.approved { background: linear-gradient(135deg, #27AE60, #1E8449); }
    .mtd-tl-icon.rejected { background: linear-gradient(135deg, #E74C3C, #C0392B); }

    @keyframes tlPulse {
      0%, 100% { box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 0 0 0 rgba(243,156,18,0.4); }
      50% { box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 0 0 8px rgba(243,156,18,0); }
    }

    .mtd-tl-card {
      background: rgba(244,250,251,0.6);
      border: 1px solid rgba(79,124,130,0.1);
      border-radius: 14px;
      padding: 0.9rem 1.05rem;
      transition: all 0.22s;
    }
    .mtd-tl-card:hover {
      background: #fff;
      box-shadow: 0 4px 14px rgba(11,46,51,0.06);
      transform: translateX(2px);
    }
    .mtd-tl-card-title { font-size: 0.92rem; font-weight: 700; color: var(--winter-dark); margin-bottom: 0.22rem; }
    .mtd-tl-card-sub { font-size: 0.78rem; color: var(--apple-text-tertiary); line-height: 1.4; font-weight: 500; }
    .mtd-tl-card-comment {
      margin-top: 0.55rem; padding: 0.6rem 0.8rem;
      background: rgba(255,255,255,0.75); border-radius: 10px;
      font-size: 0.83rem; color: var(--apple-text-secondary); line-height: 1.5;
      border-left: 3px solid rgba(79,124,130,0.3);
    }
    .mtd-tl-card-files { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }
    .mtd-tl-card-file {
      display: inline-flex; align-items: center; gap: 0.3rem;
      padding: 0.3rem 0.6rem;
      background: rgba(255,255,255,0.8);
      border: 1px solid rgba(79,124,130,0.12);
      border-radius: 8px; font-size: 0.76rem;
      color: var(--winter-medium);
      font-weight: 600; text-decoration: none; transition: all 0.15s;
    }
    .mtd-tl-card-file:hover {
      background: #fff; border-color: var(--winter-medium);
      color: var(--winter-dark);
    }
    .mtd-tl-card-file svg { width: 13px; height: 13px; }

    .mtd-tl-empty-msg {
      text-align: center; padding: 2rem 1rem;
      color: var(--apple-text-tertiary); font-size: 0.9rem;
    }
    .mtd-tl-empty-msg svg { width: 40px; height: 40px; margin-bottom: 0.5rem; opacity: 0.4; }

    /* ====== REQUEST FORM SECTION ====== */
    .mtd-form-section {
      /* now lives inside a tab panel — no extra card wrapper */
      margin-bottom: 0.5rem;
    }
    .mtd-form-title {
      font-size: 0.92rem; font-weight: 700; color: var(--winter-dark);
      margin-bottom: 0.85rem;
      display: flex; align-items: center; gap: 0.45rem;
      letter-spacing: -0.005em;
    }
    .mtd-form-title svg { width: 16px; height: 16px; color: var(--winter-medium); }
    .mtd-req-textarea {
      width: 100%; min-height: 110px; padding: 0.9rem 1.05rem; border-radius: 14px;
      border: 1.5px solid rgba(79,124,130,0.15);
      background: rgba(244,250,251,0.5);
      font-size: 0.92rem; color: var(--apple-text-primary); resize: vertical;
      font-family: inherit; outline: none;
      transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
      line-height: 1.55;
    }
    .mtd-req-textarea:focus {
      border-color: var(--winter-medium);
      background: #fff;
      box-shadow: 0 0 0 4px rgba(79,124,130,0.1);
    }
    .mtd-req-textarea::placeholder { color: var(--apple-text-tertiary); }

    .mtd-file-area {
      margin-top: 0.85rem; padding: 1.35rem 1rem;
      border: 1.5px dashed rgba(79,124,130,0.22); border-radius: 14px;
      text-align: center; cursor: pointer; transition: all 0.25s;
      background: rgba(244,250,251,0.35);
    }
    .mtd-file-area:hover {
      border-color: var(--winter-medium);
      background: rgba(255,255,255,0.8);
      transform: translateY(-1px);
    }
    .mtd-file-area svg { width: 28px; height: 28px; color: var(--winter-medium); margin-bottom: 0.5rem; }
    .mtd-file-area-text { font-size: 0.88rem; color: var(--winter-dark); font-weight: 600; }
    .mtd-file-area-hint { font-size: 0.75rem; color: var(--apple-text-tertiary); margin-top: 0.25rem; }
    .mtd-file-input { display: none; }
    .mtd-file-list { margin-top: 0.7rem; display: flex; flex-direction: column; gap: 0.4rem; }
    .mtd-file-item {
      display: flex; align-items: center; gap: 0.55rem;
      padding: 0.55rem 0.75rem;
      background: rgba(255,255,255,0.8);
      border: 1px solid rgba(79,124,130,0.1);
      border-radius: 11px; font-size: 0.84rem;
    }
    .mtd-file-item svg { width: 16px; height: 16px; color: var(--winter-medium); flex-shrink: 0; }
    .mtd-file-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--winter-dark); }
    .mtd-file-item-size { font-size: 0.72rem; color: var(--apple-text-tertiary); }
    .mtd-file-item-del {
      width: 24px; height: 24px; border-radius: 50%; border: none;
      background: rgba(196,92,92,0.08); cursor: pointer;
      display: flex; align-items: center; justify-content: center; transition: background 0.15s;
    }
    .mtd-file-item-del:hover { background: rgba(196,92,92,0.2); }
    .mtd-file-item-del svg { width: 13px; height: 13px; color: var(--apple-red); }

    /* Action buttons */
    .mtd-actions { display: flex; gap: 0.7rem; margin-top: 1.1rem; justify-content: flex-end; flex-wrap: wrap; }
    .mtd-btn {
      padding: 0.72rem 1.5rem; border-radius: 12px; font-size: 0.9rem;
      font-weight: 700; cursor: pointer; border: none; font-family: inherit;
      transition: all 0.25s; letter-spacing: 0.005em;
      display: inline-flex; align-items: center; gap: 0.4rem;
    }
    .mtd-btn svg { width: 15px; height: 15px; }
    .mtd-btn-ghost { background: rgba(79,124,130,0.08); color: var(--apple-text-secondary); }
    .mtd-btn-ghost:hover { background: rgba(79,124,130,0.15); }
    .mtd-btn-primary {
      background: linear-gradient(135deg, var(--winter-medium), var(--winter-dark));
      color: #fff;
      box-shadow: 0 4px 16px rgba(11,46,51,0.22);
    }
    .mtd-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(11,46,51,0.3); }
    .mtd-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
    .mtd-btn-approve { background: linear-gradient(135deg, #27AE60, #1E8449); color: #fff; box-shadow: 0 4px 16px rgba(39,174,96,0.3); }
    .mtd-btn-approve:hover { transform: translateY(-2px); }
    .mtd-btn-reject { background: rgba(220,53,69,0.08); color: #C0392B; border: 1px solid rgba(220,53,69,0.15); }
    .mtd-btn-reject:hover { background: rgba(220,53,69,0.15); }

    /* Status message */
    .mtd-status-msg {
      display: flex; align-items: center; justify-content: center; gap: 0.5rem;
      text-align: center; padding: 1.25rem; border-radius: 14px;
      font-weight: 700; font-size: 0.92rem;
      border: 1px solid transparent;
    }
    .mtd-status-msg.pending {
      background: rgba(243,156,18,0.08);
      color: var(--status-orange);
      border-color: rgba(243,156,18,0.18);
    }
    .mtd-status-msg.approved {
      background: rgba(39,174,96,0.08);
      color: var(--status-green);
      border-color: rgba(39,174,96,0.18);
    }

    /* ====== RESPONSIVE (mobile) ====== */
    @media (max-width: 768px) {
      .mtd-page { padding: 1rem 1rem 3rem; }
      .mtd-hero-title { font-size: 1.65rem; }
      .mtd-time-card { flex-direction: row; align-items: center; padding: 0.9rem 1rem; }
      .mtd-time-value { font-size: 1.15rem; }
      .mtd-section, .mtd-info-card { padding: 1.15rem; border-radius: 16px; }
      .mtd-tl-track { padding-left: 2.5rem; margin-left: 0.5rem; }
      .mtd-tl-icon { left: -2.5rem; margin-left: -14px; width: 30px; height: 30px; }
      .mtd-tl-icon svg { width: 12px; height: 12px; }
      .mtd-attach-row { padding: 0.6rem 0.7rem; gap: 0.65rem; }
      .mtd-attach-actions { gap: 0.6rem; }
      .mtd-attach-act span { display: none; }
      .mtd-tab-btn { margin-right: 1rem; font-size: 0.88rem; }

      /* Progress timeline on mobile */
      .mtd-prog-stats {
        grid-template-columns: 1fr;
        gap: 0.85rem;
        text-align: left;
      }
      .mtd-prog-stat-block.right { align-items: flex-start; text-align: left; }
      .mtd-prog-countdown {
        order: -1;
        min-width: 0;
        text-align: center;
      }
      .mtd-prog-count-value { font-size: 1.2rem; }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
      .mtd-page { padding: 1.5rem 2rem 4rem; }
    }

    /* Request badges on table */
    .mt-req-badge {
      display: inline-flex; align-items: center; gap: 0.25rem;
      padding: 0.15rem 0.4rem; border-radius: 5px;
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
    }
    .mt-req-badge.pending { background: rgba(230,126,34,0.1); color: var(--status-orange); }
    .mt-req-badge.approved { background: rgba(39,174,96,0.1); color: var(--status-green); }
    .mt-req-badge.rejected { background: rgba(220,53,69,0.1); color: var(--status-red); }

    .udm-notif-badge {
      min-width: 18px; height: 18px;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--status-red); color: #fff;
      font-size: 0.68rem; font-weight: 700;
      border-radius: 100px; padding: 0 5px;
      animation: pulse-soft 2s ease-in-out infinite;
    }
    .mt-table tr.mt-clickable { cursor: pointer; }
    .mt-table tr.mt-clickable:hover td { background: rgba(46,134,171,0.04); }

    /* ====== ADMIN REVIEW — Request card ====== */
    .mtd-admin-card {
      background: rgba(255,255,255,0.98);
      border: 1px solid rgba(79,124,130,0.08);
      border-radius: 18px; padding: 1.5rem;
      margin-bottom: 1rem;
      box-shadow: 0 2px 12px rgba(11,46,51,0.04);
      transition: box-shadow 0.2s;
      animation: slideInUp 0.35s cubic-bezier(0.32,0.72,0,1) backwards;
    }
    .mtd-admin-card:hover { box-shadow: 0 6px 24px rgba(11,46,51,0.08); }
    .mtd-admin-card-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
    .mtd-admin-card-name { font-size: 1rem; font-weight: 700; color: var(--winter-dark); }
    .mtd-admin-card-task { font-size: 0.9rem; color: var(--apple-text-primary); margin-bottom: 0.25rem; }
    .mtd-admin-card-meta { font-size: 0.78rem; color: var(--apple-text-tertiary); margin-bottom: 0.6rem; }

    @media (max-width: 600px) {
      .mtd-page { padding: 1rem 0.75rem 3rem; }
      .mtd-tl-track { padding-left: 3.25rem; margin-left: 1.25rem; }
      .mtd-tl-icon { left: -3.25rem; width: 34px; height: 34px; margin-left: -16px; }
      .mtd-tl-icon svg { width: 15px; height: 15px; }
      .mtd-actions { flex-direction: column; }
      .mtd-btn { width: 100%; text-align: center; }
    }

    /* Responsive */
    @media (max-width: 768px) {
      .mt-stats-row { grid-template-columns: repeat(2, 1fr); }
      .mt-user-banner { flex-direction: column; text-align: center; padding: 1.25rem; }
      .mt-table { font-size: 0.78rem; }
      .mt-table th, .mt-table td { padding: 0.6rem 0.5rem; }
      .mt-parent-name, .mt-activity-name { max-width: 140px; }
      .mt-filter-bar { flex-direction: column; align-items: stretch; }
      .mt-filter-count { margin-left: 0; text-align: right; }
    }
    @media (max-width: 480px) {
      .mt-stats-row { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
      .mt-stat-value { font-size: 1.5rem; }
      .mt-parent-name, .mt-activity-name { max-width: 100px; }
    }

    /* ── MT View System ── */
    .mt-view { display: none; }
    .mt-view-active { display: block; animation: fadeInMt 0.35s cubic-bezier(.32,.72,0,1); }

    .mt-nav-back {
      width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,.8); border: 1px solid rgba(79,124,130,.1); border-radius: 11px;
      cursor: pointer; color: var(--winter-medium); flex-shrink: 0;
      transition: all .25s cubic-bezier(.2,.8,.2,1);
    }
    .mt-nav-back:hover { background: #fff; border-color: var(--winter-medium); transform: scale(1.06); box-shadow: 0 4px 14px rgba(79,124,130,.12); }
    .mt-nav-back svg { width: 18px; height: 18px; }

    /* ── Category Cards Grid ── */
    .mt-cards-grid {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 0.25rem;
    }
    @media (max-width: 640px) { .mt-cards-grid { grid-template-columns: 1fr; } }

    .mt-card {
      position: relative; background: rgba(255,255,255,.94); border-radius: 24px;
      padding: 1.75rem 1.5rem 1.5rem; border: 1.5px solid rgba(79,124,130,.08);
      cursor: pointer; overflow: hidden;
      transition: all .35s cubic-bezier(.2,.8,.2,1);
      box-shadow: 0 2px 16px rgba(11,46,51,.03);
    }
    .mt-card:hover {
      transform: translateY(-5px); box-shadow: 0 16px 48px rgba(11,46,51,.1);
      border-color: rgba(79,124,130,.18);
    }
    .mt-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
      border-radius: 24px 24px 0 0;
    }
    .mt-card.dio::before { background: linear-gradient(90deg, #2E86AB, #3A9BC5); }
    .mt-card.pssr::before { background: linear-gradient(90deg, #8E44AD, #A569BD); }
    .mt-card.ora::before { background: linear-gradient(90deg, #D35400, #E67E22); }
    .mt-card.pt::before { background: linear-gradient(90deg, #27AE60, #2ECC71); }

    .mt-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
    .mt-card-icon {
      width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
    }
    .mt-card-icon svg { width: 24px; height: 24px; }
    .mt-card.dio .mt-card-icon { background: rgba(46,134,171,.1); color: #2E86AB; }
    .mt-card.pssr .mt-card-icon { background: rgba(142,68,173,.1); color: #8E44AD; }
    .mt-card.ora .mt-card-icon { background: rgba(211,84,0,.1); color: #D35400; }
    .mt-card.pt .mt-card-icon { background: rgba(39,174,96,.1); color: #27AE60; }

    .mt-card-arrow { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(79,124,130,.05); color: var(--apple-text-tertiary); transition: all .3s; }
    .mt-card:hover .mt-card-arrow { background: rgba(79,124,130,.1); color: var(--winter-medium); transform: translateX(3px); }
    .mt-card-arrow svg { width: 16px; height: 16px; }

    .mt-card-name { font-size: 1.15rem; font-weight: 700; color: var(--winter-dark); letter-spacing: -0.02em; margin-bottom: 0.15rem; }
    .mt-card-desc { font-size: 0.78rem; color: var(--apple-text-tertiary); margin-bottom: 1.25rem; }

    .mt-card-stats { display: flex; gap: 0.5rem; flex-wrap: wrap; }
    .mt-card-chip {
      display: inline-flex; align-items: center; gap: 0.3rem;
      padding: 0.3rem 0.65rem; border-radius: 8px; font-size: 0.72rem; font-weight: 600;
    }
    .mt-card-chip.total { background: rgba(79,124,130,.06); color: var(--winter-dark); }
    .mt-card-chip.ongoing { background: var(--status-orange-bg); color: var(--status-orange); }
    .mt-card-chip.completed { background: var(--status-green-bg); color: var(--status-green); }
    .mt-card-chip.overdue { background: var(--status-red-bg); color: var(--status-red); }
    .mt-card-chip-dot { width: 6px; height: 6px; border-radius: 50%; }
    .mt-card-chip.ongoing .mt-card-chip-dot { background: var(--status-orange); }
    .mt-card-chip.completed .mt-card-chip-dot { background: var(--status-green); }
    .mt-card-chip.overdue .mt-card-chip-dot { background: var(--status-red); }

    .mt-card-empty { text-align: center; padding: 1.5rem 1rem; color: var(--apple-text-tertiary); font-size: 0.82rem; }

    /* Clickable stat cards */
    .mt-stat-clickable { cursor: pointer; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
    .mt-stat-clickable:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(11,46,51,0.1); border-color: rgba(79,124,130,0.2); }
    .mt-stat-clickable:active { transform: translateY(-1px); }
    .mt-stat-clickable.mt-stat-active { border-color: var(--winter-medium); box-shadow: 0 8px 28px rgba(79,124,130,0.15); transform: translateY(-2px); }

    /* Parent items list */
    .mt-parent-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 2rem; }
    .mt-parent-item {
      display: flex; align-items: center; gap: 1.25rem;
      background: rgba(255,255,255,0.94); border-radius: 18px;
      padding: 1.25rem 1.5rem; border: 1px solid rgba(79,124,130,0.06);
      border-left: 4px solid var(--winter-medium);
      cursor: pointer; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
      box-shadow: 0 2px 12px rgba(11,46,51,0.03);
    }
    .mt-parent-item:hover {
      transform: translateX(4px); box-shadow: 0 8px 32px rgba(11,46,51,0.08);
      border-left-width: 5px; background: rgba(255,255,255,1);
    }
    .mt-parent-item-date {
      flex-shrink: 0; width: 80px; font-size: 0.82rem; font-weight: 600;
      color: var(--apple-text-secondary); text-align: center;
      padding: 0.4rem 0; border-radius: 8px; background: rgba(244,250,251,0.7);
    }
    .mt-parent-item-body { flex: 1; min-width: 0; }
    .mt-parent-item-name {
      font-size: 0.9rem; font-weight: 600; color: var(--winter-dark);
      line-height: 1.4; margin-bottom: 0.3rem;
    }
    .mt-parent-item-number {
      display: inline-flex; padding: 0.2rem 0.55rem; border-radius: 6px;
      background: rgba(79,124,130,0.06); border: 1px solid rgba(79,124,130,0.08);
      font-size: 0.7rem; font-weight: 600; color: var(--apple-text-tertiary);
      letter-spacing: 0.02em; margin-bottom: 0.2rem;
    }
    .mt-parent-item-count {
      font-size: 0.72rem; color: var(--apple-text-tertiary); margin-top: 0.15rem;
    }
    .mt-parent-item-arrow {
      flex-shrink: 0; color: var(--apple-text-tertiary); opacity: 0.35;
      transition: all 0.3s;
    }
    .mt-parent-item:hover .mt-parent-item-arrow { opacity: 0.7; transform: translateX(3px); }
    .mt-parent-item-arrow svg { width: 18px; height: 18px; }


/* ==================== 2. blok (orijinal sətir 9450) ==================== */
/* ============================================== */
    /* LOGIN PAGE STYLES - Apple-Style Modern Design */
    /* ============================================== */

    /* Login Container */
    .login-container {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      background: linear-gradient(180deg, #F4FAFB 0%, #E5F2F4 50%, #F4FAFB 100%);
    }

    .login-box {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border-radius: 24px;
      padding: 3rem;
      width: 100%;
      max-width: 420px;
      box-shadow: var(--apple-shadow-lg);
      border: 1px solid rgba(79, 124, 130, 0.1);
      animation: loginSlideUp 0.6s cubic-bezier(0.32, 0.72, 0, 1);
    }

    @keyframes loginSlideUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .login-logo {
      text-align: center;
      margin-bottom: 2rem;
    }

    .login-logo-icon {
      width: 72px;
      height: 72px;
      background: linear-gradient(135deg, var(--winter-medium), var(--winter-dark));
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1rem;
      box-shadow: var(--apple-shadow-md);
    }

    .login-logo-icon svg {
      width: 36px;
      height: 36px;
      stroke: white;
    }

    .login-title {
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--winter-dark);
      margin-bottom: 0.5rem;
      letter-spacing: -0.02em;
    }

    .login-subtitle {
      font-size: 0.9375rem;
      color: var(--apple-text-secondary);
      line-height: 1.5;
    }

    /* Tab Switcher */
    .auth-tabs {
      display: flex;
      gap: 0.5rem;
      background: rgba(79, 124, 130, 0.08);
      padding: 4px;
      border-radius: 12px;
      margin-bottom: 2rem;
    }

    .auth-tab {
      flex: 1;
      padding: 0.75rem 1rem;
      border: none;
      background: transparent;
      border-radius: 10px;
      font-size: 0.9375rem;
      font-weight: 500;
      color: var(--apple-text-secondary);
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: inherit;
    }

    .auth-tab.active {
      background: white;
      color: var(--winter-dark);
      box-shadow: var(--apple-shadow-sm);
    }

    .auth-tab:hover:not(.active) {
      color: var(--winter-dark);
    }

    /* Form Styles */
    .auth-form {
      display: none;
    }

    .auth-form.active {
      display: block;
      animation: authFadeIn 0.3s ease;
    }

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

    .form-group {
      margin-bottom: 1.25rem;
    }

    .form-label {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--apple-text-primary);
      margin-bottom: 0.5rem;
    }

    .form-input {
      width: 100%;
      padding: 0.875rem 1rem;
      border: 1.5px solid rgba(79, 124, 130, 0.2);
      border-radius: 12px;
      font-size: 1rem;
      color: var(--apple-text-primary);
      background: white;
      transition: all 0.2s ease;
      outline: none;
      font-family: inherit;
    }

    .form-input:focus {
      border-color: var(--winter-medium);
      box-shadow: 0 0 0 4px rgba(79, 124, 130, 0.1);
    }

    .form-input::placeholder {
      color: var(--apple-text-tertiary);
    }

    .form-hint {
      font-size: 0.8125rem;
      color: var(--apple-text-tertiary);
      margin-top: 0.5rem;
      display: flex;
      align-items: center;
      gap: 0.375rem;
    }

    .form-hint svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }

    /* Submit Button */
    .submit-btn {
      width: 100%;
      padding: 1rem;
      border: none;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--winter-medium), var(--winter-dark));
      color: white;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-top: 0.5rem;
      font-family: inherit;
    }

    .submit-btn:hover {
      transform: translateY(-2px);
      box-shadow: var(--apple-shadow-md);
    }

    .submit-btn:active {
      transform: translateY(0);
    }

    .submit-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }

    /* Error/Success Messages */
    .auth-message {
      padding: 1rem;
      border-radius: 12px;
      margin-bottom: 1.5rem;
      font-size: 0.875rem;
      display: none;
      align-items: flex-start;
      gap: 0.75rem;
    }

    .auth-message.show {
      display: flex;
    }

    .auth-message.error {
      background: rgba(196, 92, 92, 0.1);
      border: 1px solid rgba(196, 92, 92, 0.2);
      color: #9B3A3A;
    }

    .auth-message.success {
      background: rgba(58, 107, 112, 0.1);
      border: 1px solid rgba(58, 107, 112, 0.2);
      color: #2A5459;
    }

    .auth-message svg {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    /* Domain Badge */
    .domain-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      background: rgba(79, 124, 130, 0.1);
      padding: 0.5rem 0.875rem;
      border-radius: 100px;
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--winter-dark);
      margin-top: 1.5rem;
    }

    .domain-badge svg {
      width: 14px;
      height: 14px;
    }

    /* Loading Spinner */
    .auth-spinner {
      width: 20px;
      height: 20px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: white;
      border-radius: 50%;
      animation: authSpin 0.8s linear infinite;
      display: inline-block;
      margin-right: 0.5rem;
    }

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

    /* User Header Dropdown */
    .user-dropdown {
      position: relative;
    }

    .user-header-btn {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.5rem 1rem;
      background: rgba(79, 124, 130, 0.1);
      border-radius: 100px;
      cursor: pointer;
      transition: all 0.2s ease;
      border: none;
      font-family: inherit;
    }

    .user-header-btn:hover {
      background: rgba(79, 124, 130, 0.15);
    }

    .user-avatar {
      width: 32px;
      height: 32px;
      background: linear-gradient(135deg, var(--winter-medium), var(--winter-dark));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 0.75rem;
      font-weight: 600;
    }

    .user-email {
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--winter-dark);
      max-width: 180px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .user-dropdown-menu {
      position: absolute;
      top: calc(100% + 0.5rem);
      right: 0;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border-radius: 16px;
      box-shadow: 0 12px 40px rgba(11, 46, 51, 0.15), 0 0 0 1px rgba(79, 124, 130, 0.1);
      padding: 0.5rem;
      min-width: 240px;
      display: none;
      z-index: 1001;
    }

    .user-dropdown-menu.show {
      display: block;
      animation: dropdownFadeIn 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    }

    @keyframes dropdownFadeIn {
      from {
        opacity: 0;
        transform: translateY(-8px) scale(0.97);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .udm-nav-item {
      width: 100%;
      padding: 0.7rem 0.85rem;
      background: none;
      border: none;
      border-radius: 10px;
      color: var(--apple-text-primary);
      font-size: 0.85rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s ease;
      display: flex;
      align-items: center;
      gap: 0.65rem;
      font-family: inherit;
      text-align: left;
    }
    .udm-nav-item:hover {
      background: rgba(79, 124, 130, 0.08);
    }
    .udm-nav-item svg {
      width: 18px;
      height: 18px;
      color: var(--winter-medium);
      flex-shrink: 0;
    }
    .udm-nav-item .udm-label { flex: 1; }
    .udm-nav-item .udm-badge {
      font-size: 0.68rem;
      font-weight: 700;
      padding: 0.15rem 0.45rem;
      border-radius: 6px;
      background: rgba(79, 124, 130, 0.1);
      color: var(--winter-medium);
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    /* My Tasks item special color */
    .udm-nav-item.udm-mytasks svg { color: #2E86AB; }
    .udm-nav-item.udm-mytasks:hover { background: rgba(46, 134, 171, 0.08); }

    .udm-divider {
      height: 1px;
      background: rgba(79, 124, 130, 0.1);
      margin: 0.35rem 0.5rem;
    }

    .logout-btn {
      width: 100%;
      padding: 0.75rem 1rem;
      background: rgba(196, 92, 92, 0.08);
      border: none;
      border-radius: 8px;
      color: #9B3A3A;
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-family: inherit;
    }

    .logout-btn:hover {
      background: rgba(196, 92, 92, 0.15);
    }

    .logout-btn svg {
      width: 16px;
      height: 16px;
    }

    /* Password Toggle */
    .password-wrapper {
      position: relative;
    }

    .password-toggle {
      position: absolute;
      right: 1rem;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: var(--apple-text-tertiary);
      cursor: pointer;
      padding: 0.25rem;
    }

    .password-toggle:hover {
      color: var(--winter-dark);
    }

    /* Forgot Password Link */
    .forgot-link {
      display: block;
      text-align: right;
      font-size: 0.8125rem;
      color: var(--winter-medium);
      text-decoration: none;
      margin-top: -0.5rem;
      margin-bottom: 1rem;
    }

    .forgot-link:hover {
      text-decoration: underline;
    }

    /* Hide/Show based on auth state */
    #loginScreen {
      display: block;
    }

    #dashboardScreen {
      display: none;
    }

    body.authenticated #loginScreen {
      display: none !important;
    }

    body.authenticated #dashboardScreen {
      display: block !important;
    }

    /* ============================================ */
    /* ROLE-BASED ACCESS CONTROL (RBAC)             */
    /* ps-only: Yalnız ps_engineer rolu görə bilər  */
    /* ============================================ */
    .ps-only {
      display: none !important;
    }

    body.role-ps-engineer .ps-only {
      display: inline-flex !important;
    }

    /* Table operation buttons need flex */
    body.role-ps-engineer .ps-only.action-row-ops {
      display: flex !important;
    }

    /* Dropdown nav items need flex */
    body.role-ps-engineer .ps-only.udm-nav-item {
      display: flex !important;
    }

    /* Form panels need block */
    body.role-ps-engineer .ps-only-block {
      display: block !important;
    }

    .ps-only-block {
      display: none !important;
    }

/* ========================================
   BYPASS OVERLAY
   ======================================== */

.bypass-overlay.visible { display: block; }


.bypass-table th .sort-icon {
  margin-left: 0.5rem;
  opacity: 0.4;
}


/* ============================================== */
/* BYPASS CARD-BASED DESIGN ADDITIONS             */
/* ============================================== */


.bypass-stat-pill.active {
  background: rgba(212, 136, 74, 0.12);
  border-color: rgba(212, 136, 74, 0.3);
}

.bypass-stat-pill.active .bypass-stat-num {
  color: #D4884A;
}

.bypass-stat-pill.restored {
  background: rgba(58, 107, 112, 0.12);
  border-color: rgba(58, 107, 112, 0.3);
}

.bypass-stat-pill.restored .bypass-stat-num {
  color: #3A6B70;
}


/* Without sidebar layout */


.bypass-category-item.active {
  background: rgba(79, 124, 130, 0.1);
  border-left-color: var(--winter-medium);
}


.bypass-category-item.active .bypass-cat-name {
  font-weight: 600;
  color: var(--winter-dark);
}


.bypass-category-item.active .bypass-cat-count {
  background: var(--winter-medium);
  color: #FFFFFF;
}


.bypass-card-item.restored .bypass-card-accent {
  background: linear-gradient(180deg, #3A6B70 0%, #4F7C82 100%);
}


.bypass-card-tag.category {
  background: rgba(212, 136, 74, 0.12);
  color: #B5723A;
}


/* Bypass Detail Overlay - Full Page */

.bypass-detail-overlay.visible {
  display: block;
}


@keyframes bypassDetailSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}


.bypass-detail-info-grid.two-col {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}


.bypass-detail-info-item.full {
  grid-column: 1 / -1;
}


/* Scroll çubuğunu gizlətmək */


@media (max-width: 1200px) {
          .bypass-category-item.active { border-left-color: transparent; border-bottom-color: var(--winter-medium); }
    }

@media (max-width: 768px) {
                .bypass-detail-info-grid.two-col { grid-template-columns: 1fr; }
      }

/* ================= YENİ ORA SİSTEMİ STİLLƏRİ ================= */

/* ORA List Modal Overlay */
.ora-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 46, 51, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 9999;
  padding: 2rem 1.5rem;
  overflow-y: auto;
}

.ora-modal-overlay.visible {
  display: flex;
}

.ora-modal {
  background: #FFFFFF;
  border-radius: 24px;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(11, 46, 51, 0.2);
  animation: oraModalSlideIn 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
}

.ora-modal.large {
  max-width: 1100px;
}

.ora-modal.medium {
  max-width: 700px;
}

@keyframes oraModalSlideIn {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.ora-modal-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid rgba(79, 124, 130, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(79, 124, 130, 0.05), rgba(79, 124, 130, 0.02));
}

.ora-modal-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ora-modal-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  color: var(--winter-medium);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.ora-modal-back-btn:hover {
  background: rgba(79, 124, 130, 0.1);
  color: var(--winter-dark);
}

.ora-modal-back-btn svg {
  width: 18px;
  height: 18px;
}

.ora-modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--winter-dark);
  margin: 0;
}

.ora-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(79, 124, 130, 0.1);
  border: none;
  color: var(--apple-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.ora-modal-close:hover {
  background: rgba(196, 92, 92, 0.15);
  color: var(--apple-red);
}

.ora-modal-close svg {
  width: 18px;
  height: 18px;
}

.ora-modal-body {
  padding: 1.5rem 2rem 2rem;
  overflow-y: auto;
  flex: 1;
}

/* Search Bar */
.ora-search-bar {
  margin-bottom: 1.25rem;
}

.ora-search-input {
  width: 100%;
  padding: 0.875rem 1.25rem;
  padding-left: 2.75rem;
  border: 2px solid rgba(79, 124, 130, 0.15);
  border-radius: 12px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--apple-text-primary);
  background: rgba(244, 250, 251, 0.5);
  transition: all 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234F7C82' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 1rem center;
}

.ora-search-input:focus {
  outline: none;
  border-color: var(--winter-medium);
  background-color: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(79, 124, 130, 0.12);
}

.ora-search-input::placeholder {
  color: var(--apple-text-tertiary);
}

/* ORA List Header Row */
.ora-list-header {
  display: flex;
  padding: 0.75rem 1rem;
  background: rgba(79, 124, 130, 0.06);
  border-radius: 10px;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--apple-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ora-list-header > div:nth-child(1) { flex: 2; }
.ora-list-header > div:nth-child(2) { flex: 1; text-align: center; }
.ora-list-header > div:nth-child(3) { flex: 1; text-align: center; }

/* ORA List Container */
.ora-list-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 500px;
  overflow-y: auto;
}

/* ORA List Item Card */
.ora-list-item {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  background: #FFFFFF;
  border: 1px solid rgba(79, 124, 130, 0.12);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 4px solid var(--winter-medium);
}

.ora-list-item:hover {
  background: rgba(79, 124, 130, 0.04);
  border-color: rgba(79, 124, 130, 0.25);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(11, 46, 51, 0.08);
}

.ora-list-item > div:nth-child(1) {
  flex: 2;
  font-weight: 600;
  color: var(--winter-dark);
  font-size: 0.95rem;
}

.ora-list-item > div:nth-child(2) {
  flex: 1;
  text-align: center;
  font-size: 0.85rem;
  color: var(--apple-text-secondary);
}

.ora-list-item > div:nth-child(3) {
  flex: 1;
  text-align: center;
}

/* Status Badge */
.ora-status-badge {
  display: inline-flex;
  padding: 0.35rem 0.75rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
}

.ora-status-badge.completed {
  background: rgba(48, 209, 88, 0.15);
  color: var(--apple-green);
}

.ora-status-badge.ongoing {
  background: rgba(212, 136, 74, 0.15);
  color: var(--apple-orange);
}

.ora-status-badge.default {
  background: rgba(79, 124, 130, 0.12);
  color: var(--winter-medium);
}

/* ORA Detail Grid */
.ora-detail-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

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

/* ORA Info Card */
.ora-info-card {
  background: #FFFFFF;
  padding: 1.5rem;
  border-radius: 16px;
  border: 1px solid rgba(79, 124, 130, 0.12);
}

.ora-info-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--winter-dark);
  margin: 0 0 1.25rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(79, 124, 130, 0.1);
}

.ora-info-row {
  display: flex;
  justify-content: space-between;
  padding: 0.625rem 0;
  border-bottom: 1px solid rgba(79, 124, 130, 0.06);
}

.ora-info-row:last-of-type {
  border-bottom: none;
}

.ora-info-row .label {
  font-size: 0.85rem;
  color: var(--apple-text-secondary);
  font-weight: 500;
}

.ora-info-row .value {
  font-size: 0.9rem;
  color: var(--winter-dark);
  font-weight: 600;
  text-align: right;
}

.ora-info-description {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(79, 124, 130, 0.1);
}

.ora-info-description .label {
  font-size: 0.8rem;
  color: var(--apple-text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}

.ora-info-description .value-text {
  font-size: 0.9rem;
  color: var(--apple-text-primary);
  line-height: 1.6;
  background: rgba(79, 124, 130, 0.04);
  padding: 0.875rem;
  border-radius: 10px;
  margin: 0;
}

/* ORA Stats Card */
.ora-stats-card {
  background: #FFFFFF;
  padding: 1.5rem;
  border-radius: 16px;
  border: 1px solid rgba(79, 124, 130, 0.12);
}

.ora-stats-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--winter-dark);
  margin: 0 0 1.25rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(79, 124, 130, 0.1);
}

/* Stat Box - Clickable */
.ora-stat-box {
  padding: 1.25rem;
  margin-bottom: 0.875rem;
  border-radius: 14px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
  position: relative;
}

.ora-stat-box:last-child {
  margin-bottom: 0;
}

.ora-stat-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(11, 46, 51, 0.1);
}

.ora-stat-box::after {
  content: "→";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
  font-size: 1.1rem;
  transition: all 0.2s ease;
}

.ora-stat-box:hover::after {
  opacity: 0.8;
  transform: translateY(-50%) translateX(4px);
}

.ora-stat-box.warning {
  background: linear-gradient(135deg, rgba(212, 136, 74, 0.12), rgba(212, 136, 74, 0.05));
  border-color: rgba(212, 136, 74, 0.25);
}

.ora-stat-box.warning:hover {
  border-color: rgba(212, 136, 74, 0.4);
}

.ora-stat-box.success {
  background: linear-gradient(135deg, rgba(58, 107, 112, 0.12), rgba(58, 107, 112, 0.05));
  border-color: rgba(58, 107, 112, 0.25);
}

.ora-stat-box.success:hover {
  border-color: rgba(58, 107, 112, 0.4);
}

.ora-stat-box.info {
  background: linear-gradient(135deg, rgba(79, 124, 130, 0.12), rgba(79, 124, 130, 0.05));
  border-color: rgba(79, 124, 130, 0.25);
}

.ora-stat-box.info:hover {
  border-color: rgba(79, 124, 130, 0.4);
}

.ora-stat-number {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  line-height: 1;
}

.ora-stat-box.warning .ora-stat-number {
  color: var(--apple-orange);
}

.ora-stat-box.success .ora-stat-number {
  color: var(--apple-green);
}

.ora-stat-box.info .ora-stat-number {
  color: var(--winter-medium);
}

.ora-stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--apple-text-secondary);
}

/* ORA Sub List Items */
.ora-sublist-item {
  display: block;
  padding: 1.25rem;
  background: #FFFFFF;
  border: 1px solid rgba(79, 124, 130, 0.1);
  border-radius: 14px;
  margin-bottom: 0.75rem;
  border-left: 4px solid var(--apple-orange);
  transition: all 0.2s ease;
}

.ora-sublist-item:hover {
  box-shadow: 0 4px 12px rgba(11, 46, 51, 0.08);
}

.ora-sublist-item.completed {
  border-left-color: var(--apple-green);
}

.ora-sublist-item.suggestion {
  border-left-color: var(--winter-medium);
}

.ora-sublist-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.ora-sublist-item-title {
  font-weight: 600;
  color: var(--winter-dark);
  font-size: 0.95rem;
}

.ora-sublist-item-meta {
  font-size: 0.8rem;
  color: var(--apple-text-secondary);
  margin-bottom: 0.5rem;
}

.ora-sublist-item-result {
  background: rgba(79, 124, 130, 0.06);
  padding: 0.625rem 0.875rem;
  border-radius: 8px;
  font-size: 0.8rem;
  margin-top: 0.625rem;
  color: var(--apple-text-primary);
}

/* Empty State */
.ora-empty-state {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--apple-text-tertiary);
}

.ora-empty-state svg {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.ora-empty-state p {
  font-size: 0.95rem;
  margin: 0;
}

/* ORA Modal Responsive */
@media (max-width: 600px) {
  .ora-modal {
    max-height: 95vh;
    border-radius: 20px 20px 0 0;
    margin-top: auto;
  }

  .ora-modal-header {
    padding: 1.25rem 1.5rem;
  }

  .ora-modal-body {
    padding: 1.25rem 1.5rem 1.5rem;
  }

  .ora-list-header {
    display: none;
  }

  .ora-list-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .ora-list-item > div {
    flex: unset !important;
    text-align: left !important;
    width: 100%;
  }

  .ora-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ========== NEW ORA OVERLAY SYSTEM (PT İnsidenti Style) - Enhanced Apple Design ========== */
.ora-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #F4FAFB 0%, #E8F4F6 50%, #F4FAFB 100%);
  z-index: 9999;
  display: none;
  overflow-y: auto;
  animation: fadeInOra 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes fadeInOra {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.ora-overlay.visible {
  display: block;
}

.ora-overlay-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 2.5rem 4rem;
}

/* ORA Header - Premium Apple Style */
.ora-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(79, 124, 130, 0.12);
}

.ora-overlay-title {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.ora-overlay-title h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--winter-dark);
  margin: 0;
  letter-spacing: -0.02em;
}

.ora-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.5rem;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 16px rgba(79, 124, 130, 0.3);
  background: linear-gradient(135deg, #4F7C82 0%, #3A6B70 100%);
}

.ora-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(135deg, var(--winter-medium), var(--winter-dark));
  color: #FFFFFF;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(79, 124, 130, 0.25);
}

.ora-back-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(79, 124, 130, 0.35);
}

.ora-back-btn svg {
  width: 18px;
  height: 18px;
}

/* ORA Stats Grid - Apple Pill Style */
.ora-stats-grid {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: flex-start;
}

.ora-stat-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(79, 124, 130, 0.12);
  border-radius: 14px;
  padding: 0.875rem 1.5rem;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 110px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(11, 46, 51, 0.04);
}

.ora-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(11, 46, 51, 0.1);
  border-color: rgba(79, 124, 130, 0.25);
}

.ora-stat-card .ora-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--winter-dark);
  line-height: 1;
  margin-bottom: 0.35rem;
}

.ora-stat-card .ora-stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--apple-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ora-stat-card.ongoing {
  background: linear-gradient(135deg, rgba(212, 136, 74, 0.12) 0%, rgba(255, 255, 255, 0.95) 100%);
  border-color: rgba(212, 136, 74, 0.25);
}

.ora-stat-card.ongoing .ora-stat-value {
  color: var(--apple-orange);
}

.ora-stat-card.completed {
  background: linear-gradient(135deg, rgba(58, 107, 112, 0.12) 0%, rgba(255, 255, 255, 0.95) 100%);
  border-color: rgba(58, 107, 112, 0.25);
}

.ora-stat-card.completed .ora-stat-value {
  color: var(--apple-green);
}

.ora-stat-card.active {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(11, 46, 51, 0.12);
  border-width: 2px;
  border-color: var(--winter-medium);
}

/* ORA Filters Row - Stats + Dropdown */
.ora-filters-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  padding: 1.25rem 1.5rem;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid rgba(79, 124, 130, 0.1);
  box-shadow: 0 2px 12px rgba(11, 46, 51, 0.04);
}

/* ORA Area Dropdown - Apple Style */
.ora-area-dropdown-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 220px;
}

.ora-area-dropdown-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--apple-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ora-area-dropdown {
  position: relative;
}

.ora-area-dropdown-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem 1rem;
  background: #FFFFFF;
  border: 1.5px solid rgba(79, 124, 130, 0.25);
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--winter-dark);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(11, 46, 51, 0.04);
}

.ora-area-dropdown-btn:hover {
  border-color: var(--winter-medium);
  box-shadow: 0 4px 12px rgba(11, 46, 51, 0.08);
}

.ora-area-dropdown-btn:focus {
  outline: none;
  border-color: var(--winter-medium);
  box-shadow: 0 0 0 4px rgba(79, 124, 130, 0.15);
}

.ora-area-dropdown-btn svg {
  width: 18px;
  height: 18px;
  color: var(--winter-medium);
  transition: transform 0.25s ease;
}

.ora-area-dropdown.open .ora-area-dropdown-btn svg {
  transform: rotate(180deg);
}

.ora-area-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1px solid rgba(79, 124, 130, 0.15);
  border-radius: 14px;
  box-shadow: 0 12px 32px -4px rgba(11, 46, 51, 0.15);
  max-height: 280px;
  overflow-y: auto;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ora-area-dropdown.open .ora-area-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ora-area-dropdown-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--apple-text-primary);
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: 1px solid rgba(79, 124, 130, 0.06);
}

.ora-area-dropdown-option:last-child {
  border-bottom: none;
}

.ora-area-dropdown-option:hover {
  background: rgba(79, 124, 130, 0.06);
}

.ora-area-dropdown-option.active {
  background: rgba(79, 124, 130, 0.1);
  color: var(--winter-medium);
  font-weight: 600;
}

.ora-area-dropdown-option-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 0.5rem;
  background: rgba(79, 124, 130, 0.12);
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--winter-medium);
}

.ora-area-dropdown-option.active .ora-area-dropdown-option-count {
  background: var(--winter-medium);
  color: #FFFFFF;
}

/* ORA Full Width Cards Container */
.ora-full-cards-container {
  background: #FFFFFF;
  border: 1px solid rgba(79, 124, 130, 0.15);
  border-radius: 16px;
  padding: 1rem;
  min-height: 400px;
  max-height: calc(100vh - 320px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ORA Preview Card - Remove area chip */
.ora-preview-card {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid rgba(79, 124, 130, 0.15);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: all 0.25s ease;
  gap: 1rem;
  border-left: 4px solid var(--winter-medium);
}

.ora-preview-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--apple-shadow-md);
  border-color: var(--winter-medium);
}

/* ORA Detail Modal - Larger Size */
.ora-detail-modal-large {
  max-width: 1100px !important;
}

.ora-modal-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ora-modal-grid-4 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .ora-modal-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ORA Preview Card Inner Elements */

.ora-preview-left {
  min-width: 90px;
}

.ora-preview-date {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--winter-dark);
  background: rgba(79, 124, 130, 0.08);
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  text-align: center;
}

.ora-preview-center {
  flex: 1;
  min-width: 0;
}

.ora-preview-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--winter-dark);
  margin-bottom: 0.35rem;
  line-height: 1.4;
}

.ora-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.ora-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  background: rgba(79, 124, 130, 0.08);
  border-radius: 20px;
  font-size: 0.75rem;
  color: var(--apple-text-secondary);
}

.ora-meta-chip svg {
  width: 12px;
  height: 12px;
}

.ora-preview-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ora-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.ora-status-chip svg {
  width: 14px;
  height: 14px;
}

.ora-status-chip.ongoing {
  background: rgba(212, 136, 74, 0.15);
  color: var(--apple-orange);
}

.ora-status-chip.completed {
  background: rgba(58, 107, 112, 0.15);
  color: var(--apple-green);
}

.ora-preview-arrow {
  width: 20px;
  height: 20px;
  color: var(--apple-text-tertiary);
  transition: transform 0.2s ease;
}

.ora-preview-card:hover .ora-preview-arrow {
  transform: translateX(3px);
  color: var(--winter-medium);
}

/* ORA Detail Empty State */
.ora-detail-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--apple-text-tertiary);
  padding: 2rem;
}

.ora-detail-empty svg {
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.ora-detail-empty p {
  font-size: 1rem;
  margin: 0;
}

/* ORA Detail Modal */
.ora-detail-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 46, 51, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: oraModalFade 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

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

.ora-detail-modal-overlay.visible {
  display: flex;
}

.ora-detail-modal {
  background: #FFFFFF;
  border-radius: 24px;
  width: 100%;
  max-width: 1000px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 80px rgba(11, 46, 51, 0.25);
  animation: oraModalSlide 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

.ora-detail-modal-large {
  max-width: 1100px;
}

@keyframes oraModalSlide {
  from { opacity: 0; transform: translateY(30px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.ora-modal-header-new {
  background: linear-gradient(135deg, #4F7C82 0%, #3A6B70 50%, #2D5559 100%);
  padding: 1.5rem 2rem;
  position: relative;
}

.ora-modal-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.ora-modal-title-area {
  flex: 1;
  min-width: 0;
}

.ora-modal-type-badge {
  display: inline-block;
  padding: 0.35rem 1rem;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}

.ora-modal-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.3;
}

.ora-modal-status-new {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  flex-shrink: 0;
}

.ora-modal-status-new.ongoing {
  background: rgba(212, 136, 74, 0.9);
  color: #FFFFFF;
}

.ora-modal-status-new.completed {
  background: rgba(58, 107, 112, 0.9);
  color: #FFFFFF;
}

.ora-modal-close-new {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ora-modal-close-new:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

.ora-modal-close-new svg {
  width: 18px;
  height: 18px;
  stroke: #FFFFFF;
  stroke-width: 2.5;
}

.ora-modal-body-new {
  flex: 1;
  overflow-y: auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: linear-gradient(180deg, #FAFCFD 0%, #FFFFFF 100%);
}

.ora-modal-section {
  background: #FFFFFF;
  border: 1px solid rgba(79, 124, 130, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(11, 46, 51, 0.04);
}

.ora-modal-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--winter-medium);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 1rem;
}

.ora-modal-section-title svg {
  width: 18px;
  height: 18px;
}

.ora-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 600px) {
  .ora-modal-grid {
    grid-template-columns: 1fr;
  }
}

.ora-modal-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ora-modal-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--apple-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ora-modal-value-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  background: #FFFFFF;
  border: 1px solid rgba(79, 124, 130, 0.15);
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--winter-dark);
}

.ora-modal-value-chip svg {
  width: 16px;
  height: 16px;
  color: var(--winter-medium);
  flex-shrink: 0;
}

.ora-modal-description {
  background: #FFFFFF;
  border: 1px solid rgba(79, 124, 130, 0.15);
  border-radius: 10px;
  padding: 1rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--apple-text-primary);
  min-height: 60px;
}

.ora-modal-description.empty {
  color: var(--apple-text-tertiary);
  font-style: italic;
}

/* ORA Activities Section in Detail Modal */
.ora-activities-section {
  background: rgba(79, 124, 130, 0.03);
  border: 1px solid rgba(79, 124, 130, 0.1);
  border-radius: 12px;
  padding: 1.25rem;
}

.ora-activities-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.ora-activities-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--winter-medium);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ora-activities-title svg {
  width: 18px;
  height: 18px;
}

.ora-activities-total {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--apple-text-secondary);
}

.ora-activities-total-count {
  font-weight: 700;
  color: var(--winter-dark);
  background: rgba(79, 124, 130, 0.1);
  padding: 0.25rem 0.6rem;
  border-radius: 8px;
}

.ora-activities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

@media (max-width: 600px) {
  .ora-activities-grid {
    grid-template-columns: 1fr;
  }
}

.ora-activity-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: #FFFFFF;
  border: 1px solid rgba(79, 124, 130, 0.15);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.ora-activity-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--apple-shadow-sm);
}

.ora-activity-card.ongoing {
  border-left: 3px solid var(--apple-orange);
}

.ora-activity-card.completed {
  border-left: 3px solid var(--apple-green);
}

.ora-activity-card.suggestions {
  border-left: 3px solid var(--apple-blue);
}

.ora-activity-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ora-activity-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ora-activity-card.ongoing .ora-activity-card-icon {
  background: rgba(212, 136, 74, 0.15);
  color: var(--apple-orange);
}

.ora-activity-card.completed .ora-activity-card-icon {
  background: rgba(58, 107, 112, 0.15);
  color: var(--apple-green);
}

.ora-activity-card.suggestions .ora-activity-card-icon {
  background: rgba(79, 124, 130, 0.15);
  color: var(--apple-blue);
}

.ora-activity-card-icon svg {
  width: 20px;
  height: 20px;
}

.ora-activity-card-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ora-activity-card-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--apple-text-secondary);
}

.ora-activity-card-count {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--winter-dark);
}

.ora-activity-card-arrow {
  width: 20px;
  height: 20px;
  color: var(--apple-text-tertiary);
  transition: transform 0.2s ease;
}

.ora-activity-card:hover .ora-activity-card-arrow {
  transform: translateX(3px);
}

/* ORA Action List Modal - PT İnsidenti kimi tam ekran */
.ora-action-list-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--apple-bg-primary);
  z-index: 10002;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}

.ora-action-list-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.ora-action-list-modal {
  background: transparent;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.ora-action-list-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(79, 124, 130, 0.15);
  box-shadow: 0 2px 16px rgba(11, 46, 51, 0.06);
}

.ora-action-list-header.ongoing {
  background: linear-gradient(135deg, rgba(212, 136, 74, 0.1) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.ora-action-list-header.completed {
  background: linear-gradient(135deg, rgba(58, 107, 112, 0.1) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.ora-action-list-header.suggestions {
  background: linear-gradient(135deg, rgba(79, 124, 130, 0.1) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.ora-action-list-title-area {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ora-action-list-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.ora-action-list-badge.ongoing {
  background: var(--apple-orange);
  color: #FFFFFF;
}

.ora-action-list-badge.completed {
  background: var(--apple-green);
  color: #FFFFFF;
}

.ora-action-list-badge.suggestions {
  background: var(--winter-medium);
  color: #FFFFFF;
}

.ora-action-list-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--winter-dark);
  letter-spacing: -0.02em;
}

.ora-action-list-close {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(79, 124, 130, 0.1);
  border: 1px solid rgba(79, 124, 130, 0.2);
  border-radius: 12px;
  padding: 0.65rem 1.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--winter-dark);
}

.ora-action-list-close:hover {
  background: rgba(79, 124, 130, 0.18);
  border-color: rgba(79, 124, 130, 0.35);
}

.ora-action-list-close svg {
  width: 18px;
  height: 18px;
  color: var(--winter-dark);
}

.ora-action-list-body {
  padding: 1.5rem 2rem;
  flex: 1;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

/* ORA Action Table - PT kimi */
.ora-action-table-wrapper {
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid rgba(79, 124, 130, 0.12);
  overflow-x: auto;
  box-shadow: 0 2px 12px rgba(11, 46, 51, 0.06);
}

.ora-action-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  min-width: 900px;
}

.ora-action-table thead {
  background: linear-gradient(135deg, rgba(79, 124, 130, 0.1) 0%, rgba(79, 124, 130, 0.05) 100%);
}

.ora-action-table th {
  padding: 1rem 1.25rem;
  text-align: left;
  font-weight: 600;
  color: var(--winter-dark);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 2px solid rgba(79, 124, 130, 0.15);
  white-space: nowrap;
}

.ora-action-table tbody tr {
  transition: all 0.2s ease;
  border-bottom: 1px solid rgba(79, 124, 130, 0.08);
}

.ora-action-table tbody tr:last-child {
  border-bottom: none;
}

.ora-action-table tbody tr:hover {
  background: rgba(79, 124, 130, 0.04);
}

.ora-action-table td {
  padding: 1rem 1.25rem;
  color: var(--apple-text-primary);
  vertical-align: top;
}

.ora-action-table td:nth-child(2) {
  max-width: 300px;
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.5;
}

.ora-action-table td:first-child {
  font-weight: 600;
  color: var(--winter-dark);
}

.ora-action-table .status-cell {
  font-weight: 600;
  font-size: 0.8rem;
}

.ora-action-table .status-cell.ongoing {
  color: var(--apple-orange);
}

.ora-action-table .status-cell.completed {
  color: var(--apple-green);
}

.ora-action-table .result-cell {
  color: var(--apple-text-secondary);
  font-size: 0.8rem;
}

.ora-action-table .result-cell.overdue {
  color: var(--apple-red);
  font-weight: 500;
}

.ora-action-table .result-cell.remaining {
  color: var(--apple-orange);
}

.ora-action-list-empty {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--apple-text-tertiary);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  border: 1px solid rgba(79, 124, 130, 0.1);
}

.ora-action-list-empty svg {
  width: 64px;
  height: 64px;
  margin-bottom: 1.25rem;
  opacity: 0.4;
}

.ora-action-list-empty div {
  font-size: 1.1rem;
  font-weight: 500;
}

@media (max-width: 768px) {
  .ora-action-list-body {
    padding: 1rem;
    overflow-x: auto;
  }

  .ora-action-list-header {
    padding: 1rem 1.25rem;
  }

  .ora-action-list-title {
    font-size: 1.1rem;
  }
}

/* ORA Overlay Responsive */
@media (max-width: 900px) {
  .ora-filters-row {
    flex-direction: column;
    align-items: stretch;
  }

  .ora-area-dropdown-wrapper {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .ora-overlay-content {
    padding: 1rem;
  }

  .ora-overlay-title h2 {
    font-size: 1.25rem;
  }

  .ora-stats-grid {
    flex-wrap: wrap;
  }

  .ora-stat-card {
    min-width: 80px;
    padding: 0.5rem 0.75rem;
  }

  .ora-preview-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .ora-preview-right {
    width: 100%;
    justify-content: space-between;
    margin-top: 0.5rem;
  }
}

/* ========== DİO/PSSR OVERLAY SİSTEMİ (Baypasetmə tipli) ========== */
.moc-overlay,
.pssr-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--apple-bg-primary);
  z-index: 9999;
  display: none;
  overflow-y: auto;
  animation: fadeInMoc 0.3s ease;
}

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

.moc-overlay.visible,
.pssr-overlay.visible {
  display: block;
}

.moc-overlay-content,
.pssr-overlay-content {
  max-width: 1600px;
  margin: 0 auto;
  padding: 1.5rem 2rem 3rem;
}

/* Header */
.moc-header,
.pssr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(79, 124, 130, 0.15);
}

.moc-header-left,
.pssr-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.moc-title,
.pssr-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--winter-dark);
  margin: 0;
}

.moc-back-btn,
.pssr-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--winter-medium), var(--winter-dark));
  color: #FFFFFF;
  border: none;
  padding: 0.6rem 1.25rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--apple-shadow-sm);
}

.moc-back-btn:hover,
.pssr-back-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--apple-shadow-md);
}

.moc-back-btn svg,
.pssr-back-btn svg {
  width: 16px;
  height: 16px;
}

/* Stats Row - Baypasetmə kimi */
.moc-stats-row,
.pssr-stats-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.moc-stat-pill,
.pssr-stat-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  background: rgba(79, 124, 130, 0.08);
  border: 1px solid rgba(79, 124, 130, 0.15);
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.moc-stat-pill:hover,
.pssr-stat-pill:hover {
  background: rgba(79, 124, 130, 0.12);
}

.moc-stat-pill.active,
.pssr-stat-pill.active {
  background: var(--winter-medium);
  border-color: var(--winter-dark);
}

.moc-stat-pill.active .moc-stat-num,
.moc-stat-pill.active .moc-stat-txt,
.pssr-stat-pill.active .pssr-stat-num,
.pssr-stat-pill.active .pssr-stat-txt {
  color: #FFFFFF;
}

.moc-stat-num,
.pssr-stat-num {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--winter-dark);
}

.moc-stat-txt,
.pssr-stat-txt {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--apple-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.moc-stat-pill.ongoing,
.pssr-stat-pill.ongoing {
  background: rgba(212, 136, 74, 0.12);
  border-color: rgba(212, 136, 74, 0.3);
}

.moc-stat-pill.ongoing .moc-stat-num,
.pssr-stat-pill.ongoing .pssr-stat-num {
  color: var(--apple-orange);
}

.moc-stat-pill.completed,
.pssr-stat-pill.completed {
  background: rgba(58, 107, 112, 0.12);
  border-color: rgba(58, 107, 112, 0.3);
}

.moc-stat-pill.completed .moc-stat-num,
.pssr-stat-pill.completed .pssr-stat-num {
  color: var(--apple-green);
}

/* Waiting (Gözləmədədir) - Yellow */
.moc-stat-pill.waiting,
.pssr-stat-pill.waiting {
  background: rgba(212, 180, 58, 0.12);
  border-color: rgba(212, 180, 58, 0.3);
}

.moc-stat-pill.waiting .moc-stat-num,
.pssr-stat-pill.waiting .pssr-stat-num {
  color: #B8960C;
}

/* Cancelled (Ləğv olunub) - Red */
.moc-stat-pill.cancelled,
.pssr-stat-pill.cancelled {
  background: rgba(196, 92, 92, 0.12);
  border-color: rgba(196, 92, 92, 0.3);
}

.moc-stat-pill.cancelled .moc-stat-num,
.pssr-stat-pill.cancelled .pssr-stat-num {
  color: var(--apple-red);
}

/* --- Active state overrides for colored pills (fix text readability) --- */
.moc-stat-pill.ongoing.active,
.pssr-stat-pill.ongoing.active {
  background: var(--apple-orange);
  border-color: #b8703a;
}

.moc-stat-pill.completed.active,
.pssr-stat-pill.completed.active {
  background: var(--apple-green);
  border-color: #2a5357;
}

.moc-stat-pill.waiting.active,
.pssr-stat-pill.waiting.active {
  background: #B8960C;
  border-color: #96790a;
}

.moc-stat-pill.cancelled.active,
.pssr-stat-pill.cancelled.active {
  background: var(--apple-red);
  border-color: #a04444;
}

.moc-stat-pill.ongoing.active .moc-stat-num,
.moc-stat-pill.ongoing.active .moc-stat-txt,
.moc-stat-pill.completed.active .moc-stat-num,
.moc-stat-pill.completed.active .moc-stat-txt,
.moc-stat-pill.waiting.active .moc-stat-num,
.moc-stat-pill.waiting.active .moc-stat-txt,
.moc-stat-pill.cancelled.active .moc-stat-num,
.moc-stat-pill.cancelled.active .moc-stat-txt,
.pssr-stat-pill.ongoing.active .pssr-stat-num,
.pssr-stat-pill.ongoing.active .pssr-stat-txt,
.pssr-stat-pill.completed.active .pssr-stat-num,
.pssr-stat-pill.completed.active .pssr-stat-txt,
.pssr-stat-pill.waiting.active .pssr-stat-num,
.pssr-stat-pill.waiting.active .pssr-stat-txt,
.pssr-stat-pill.cancelled.active .pssr-stat-num,
.pssr-stat-pill.cancelled.active .pssr-stat-txt {
  color: #FFFFFF;
}

/* ═══════════════════════════════════════════════════════════
   DİO NÖVÜ — Müvəqqəti / Daimi (Apple-style seqment filtri)
   ═══════════════════════════════════════════════════════════ */
.moc-type-divider {
  width: 1px;
  height: 26px;
  margin: 0 0.2rem;
  flex: 0 0 auto;
  background: linear-gradient(180deg, rgba(79,124,130,0) 0%, rgba(79,124,130,0.24) 50%, rgba(79,124,130,0) 100%);
}

.moc-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.15rem;
  border-radius: 25px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(79, 124, 130, 0.16);
  box-shadow: 0 1px 2px rgba(11, 46, 51, 0.04);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  transition: background 0.25s cubic-bezier(0.32, 0.72, 0, 1),
              border-color 0.25s ease,
              box-shadow 0.25s ease,
              transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}

.moc-type-pill:hover {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 3px 12px rgba(11, 46, 51, 0.08);
}

.moc-type-pill:active { transform: scale(0.97); }

.moc-type-pill svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  transition: color 0.25s ease;
}

.moc-type-num {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: color 0.25s ease;
}

.moc-type-txt {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--apple-text-secondary);
  transition: color 0.25s ease;
}

/* Müvəqqəti — amber */
.moc-type-pill.temporary {
  background: rgba(212, 136, 74, 0.10);
  border-color: rgba(212, 136, 74, 0.26);
}
.moc-type-pill.temporary svg,
.moc-type-pill.temporary .moc-type-num { color: var(--apple-orange); }
.moc-type-pill.temporary.active {
  background: linear-gradient(135deg, #E0A369, var(--apple-orange));
  border-color: #b8703a;
  box-shadow: 0 6px 18px rgba(212, 136, 74, 0.32);
}

/* Daimi — winter */
.moc-type-pill.permanent {
  background: rgba(79, 124, 130, 0.10);
  border-color: rgba(79, 124, 130, 0.26);
}
.moc-type-pill.permanent svg,
.moc-type-pill.permanent .moc-type-num { color: var(--winter-medium); }
.moc-type-pill.permanent.active {
  background: linear-gradient(135deg, var(--winter-medium), var(--winter-dark));
  border-color: var(--winter-dark);
  box-shadow: 0 6px 18px rgba(79, 124, 130, 0.30);
}

.moc-type-pill.active svg,
.moc-type-pill.active .moc-type-num,
.moc-type-pill.active .moc-type-txt { color: #FFFFFF; }

/* Kart üzərindəki növ etiketi */
.moc-card-tag.type-temporary {
  background: rgba(212, 136, 74, 0.14);
  color: #A85E28;
  font-weight: 600;
}
.moc-card-tag.type-permanent {
  background: rgba(79, 124, 130, 0.16);
  color: var(--winter-dark);
  font-weight: 600;
}

/* Detal səhifəsi — 4 sütunlu info grid + növ dəyəri */
.moc-detail-info-grid.four-col { grid-template-columns: repeat(4, 1fr); }

.moc-info-value-box.moc-type-value {
  gap: 0.45rem;
  font-weight: 600;
}
.moc-info-value-box.moc-type-value svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
.moc-info-value-box.moc-type-value.temporary {
  color: #A85E28;
  background: rgba(212, 136, 74, 0.07);
  border-color: rgba(212, 136, 74, 0.22);
}
.moc-info-value-box.moc-type-value.permanent {
  color: var(--winter-dark);
  background: rgba(79, 124, 130, 0.07);
  border-color: rgba(79, 124, 130, 0.22);
}
.moc-info-value-box.moc-type-value.none { color: var(--apple-text-tertiary); }

@media (max-width: 1080px) {
  .moc-detail-info-grid.four-col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .moc-detail-info-grid.four-col { grid-template-columns: 1fr; }
  .moc-type-divider { display: none; }
}

/* Main Content */
.moc-main-layout,
.pssr-main-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* List Header */
.moc-list-header,
.pssr-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: rgba(79, 124, 130, 0.03);
  border-radius: 12px;
}

.moc-list-title,
.pssr-list-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--winter-dark);
}

.moc-list-count,
.pssr-list-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
  padding: 0 0.75rem;
  background: var(--winter-medium);
  border-radius: 14px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #FFFFFF;
}

/* Filters Row */
.moc-filters-row,
.pssr-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1rem;
  background: #FFFFFF;
  border: 1px solid rgba(79, 124, 130, 0.12);
  border-radius: 12px;
}

.moc-filter-chip,
.pssr-filter-chip {
  position: relative;
}

.moc-filter-chip select,
.pssr-filter-chip select {
  appearance: none;
  background: rgba(79, 124, 130, 0.06);
  border: 1px solid rgba(79, 124, 130, 0.15);
  border-radius: 20px;
  padding: 0.5rem 2rem 0.5rem 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--winter-dark);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 150px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234F7C82' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

.moc-filter-chip select:hover,
.pssr-filter-chip select:hover {
  border-color: var(--winter-medium);
  background-color: rgba(79, 124, 130, 0.1);
}

.moc-filter-chip select:focus,
.pssr-filter-chip select:focus {
  outline: none;
  border-color: var(--winter-medium);
  box-shadow: 0 0 0 3px rgba(79, 124, 130, 0.15);
}

/* Cards Container */
.moc-cards-container,
.pssr-cards-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: calc(100vh - 380px);
  overflow-y: auto;
  padding: 0.5rem;
}

/* Card Item - Baypasetmə kimi */
.moc-card-item,
.pssr-card-item {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid rgba(79, 124, 130, 0.12);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: all 0.25s ease;
  gap: 1rem;
  border-left: 4px solid var(--winter-medium);
}

.moc-card-item:hover,
.pssr-card-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--apple-shadow-md);
  border-color: var(--winter-medium);
}

.moc-card-item.ongoing,
.pssr-card-item.ongoing {
  border-left-color: var(--apple-orange);
}

.moc-card-item.completed,
.pssr-card-item.completed {
  border-left-color: var(--apple-green);
}

.moc-card-item.waiting,
.pssr-card-item.waiting {
  border-left-color: #B8960C;
}

.moc-card-item.cancelled,
.pssr-card-item.cancelled {
  border-left-color: var(--apple-red);
}

.moc-card-date,
.pssr-card-date {
  min-width: 90px;
  padding: 0.5rem 0.75rem;
  background: rgba(79, 124, 130, 0.06);
  border-radius: 8px;
  text-align: center;
}

.moc-card-date-inner,
.pssr-card-date-inner {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--winter-dark);
}

.moc-card-main,
.pssr-card-main {
  flex: 1;
  min-width: 0;
}

.moc-card-title,
.pssr-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--winter-dark);
  margin-bottom: 0.35rem;
  line-height: 1.4;
}

.moc-card-tags,
.pssr-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.moc-card-tag,
.pssr-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  background: rgba(79, 124, 130, 0.08);
  border-radius: 15px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--apple-text-secondary);
}

.moc-card-tag.number,
.pssr-card-tag.number {
  background: rgba(79, 124, 130, 0.15);
  color: var(--winter-medium);
  font-weight: 600;
}

.moc-card-arrow,
.pssr-card-arrow {
  width: 20px;
  height: 20px;
  color: var(--apple-text-tertiary);
  transition: transform 0.2s ease;
}

.moc-card-item:hover .moc-card-arrow,
.pssr-card-item:hover .pssr-card-arrow {
  transform: translateX(4px);
  color: var(--winter-medium);
}

/* Empty State */
.moc-empty-state,
.pssr-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--apple-text-tertiary);
}

.moc-empty-state svg,
.pssr-empty-state svg {
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.moc-empty-state p,
.pssr-empty-state p {
  font-size: 1rem;
  margin: 0;
}

/* Detail Overlay */
.moc-detail-overlay,
.pssr-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 46, 51, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.moc-detail-overlay.visible,
.pssr-detail-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.moc-detail-content,
.pssr-detail-content {
  background: #FFFFFF;
  border-radius: 20px;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--apple-shadow-xl);
  animation: mocDetailSlide 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  margin-top: 2rem;
}

@keyframes mocDetailSlide {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.moc-detail-header,
.pssr-detail-header {
  background: linear-gradient(135deg, var(--winter-medium), var(--winter-dark));
  padding: 1.5rem;
  position: relative;
}

.moc-detail-badge,
.pssr-detail-badge {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.moc-detail-title,
.pssr-detail-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.3;
  padding-right: 3rem;
}

.moc-detail-close,
.pssr-detail-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s ease;
}

.moc-detail-close:hover,
.pssr-detail-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

.moc-detail-close svg,
.pssr-detail-close svg {
  width: 16px;
  height: 16px;
}

.moc-detail-body,
.pssr-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.moc-detail-section,
.pssr-detail-section {
  background: rgba(79, 124, 130, 0.03);
  border: 1px solid rgba(79, 124, 130, 0.1);
  border-radius: 12px;
  padding: 1.25rem;
}

.moc-detail-section-icon,
.pssr-detail-section-icon {
  width: 36px;
  height: 36px;
  background: rgba(79, 124, 130, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.moc-detail-section-icon svg,
.pssr-detail-section-icon svg {
  width: 20px;
  height: 20px;
  color: var(--winter-medium);
}

.moc-detail-section-title,
.pssr-detail-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--winter-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.moc-detail-info-grid,
.pssr-detail-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.moc-detail-info-grid.two-col,
.pssr-detail-info-grid.two-col {
  grid-template-columns: repeat(2, 1fr);
}

.moc-detail-info-item,
.pssr-detail-info-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.moc-detail-info-item.full,
.pssr-detail-info-item.full {
  grid-column: span 2;
}

.moc-info-label,
.pssr-info-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--apple-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.moc-info-value-box,
.pssr-info-value-box {
  padding: 0.65rem 0.85rem;
  background: #FFFFFF;
  border: 1px solid rgba(79, 124, 130, 0.12);
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--winter-dark);
  min-height: 38px;
  display: flex;
  align-items: center;
}

.moc-detail-text-box,
.pssr-detail-text-box {
  padding: 1rem;
  background: #FFFFFF;
  border: 1px solid rgba(79, 124, 130, 0.12);
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--apple-text-primary);
  min-height: 60px;
}

/* Activities Section in Detail */
.moc-activities-section,
.pssr-activities-section {
  background: rgba(79, 124, 130, 0.03);
  border: 1px solid rgba(79, 124, 130, 0.1);
  border-radius: 12px;
  padding: 1.25rem;
}

.moc-activities-header,
.pssr-activities-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.moc-activities-title,
.pssr-activities-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--winter-medium);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.moc-activities-title svg,
.pssr-activities-title svg {
  width: 18px;
  height: 18px;
}

.moc-activities-total,
.pssr-activities-total {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--apple-text-secondary);
}

.moc-activities-total-count,
.pssr-activities-total-count {
  font-weight: 700;
  color: var(--winter-dark);
  background: rgba(79, 124, 130, 0.1);
  padding: 0.25rem 0.6rem;
  border-radius: 8px;
}

.moc-activities-grid,
.pssr-activities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.moc-activity-card,
.pssr-activity-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: #FFFFFF;
  border: 1px solid rgba(79, 124, 130, 0.15);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.moc-activity-card:hover,
.pssr-activity-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--apple-shadow-sm);
}

.moc-activity-card.ongoing,
.pssr-activity-card.ongoing {
  border-left: 3px solid var(--apple-orange);
}

.moc-activity-card.completed,
.pssr-activity-card.completed {
  border-left: 3px solid var(--apple-green);
}

.moc-activity-card-header,
.pssr-activity-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.moc-activity-card-icon,
.pssr-activity-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.moc-activity-card.ongoing .moc-activity-card-icon,
.pssr-activity-card.ongoing .pssr-activity-card-icon {
  background: rgba(212, 136, 74, 0.15);
  color: var(--apple-orange);
}

.moc-activity-card.completed .moc-activity-card-icon,
.pssr-activity-card.completed .pssr-activity-card-icon {
  background: rgba(58, 107, 112, 0.15);
  color: var(--apple-green);
}

.moc-activity-card-icon svg,
.pssr-activity-card-icon svg {
  width: 20px;
  height: 20px;
}

.moc-activity-card-info,
.pssr-activity-card-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.moc-activity-card-label,
.pssr-activity-card-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--apple-text-secondary);
}

.moc-activity-card-count,
.pssr-activity-card-count {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--winter-dark);
}

.moc-activity-card-arrow,
.pssr-activity-card-arrow {
  width: 20px;
  height: 20px;
  color: var(--apple-text-tertiary);
  transition: transform 0.2s ease;
}

.moc-activity-card:hover .moc-activity-card-arrow,
.pssr-activity-card:hover .pssr-activity-card-arrow {
  transform: translateX(3px);
}

/* ================================================================ */
/* PT İNSİDENTİ — Tam Səhifə Görünüşü                                */
/* mtd-overlay strukturu üzərində yalnız xüsusi məzmun komponentləri */
/* ================================================================ */

/* ─── Compact override-lar (yalnız #ptIncidentPageOverlay üçün) ─── */
#ptIncidentPageOverlay {
  /* Action list overlay-ı (z-index 10002) bu səhifənin üstündə açıla bilsin deyə alçaq z-index */
  z-index: 9999 !important;
}

/* PT İncident Page açıq olarkən, action list overlay yenə də ÜSTDƏ görünsün */
#ptActionListOverlay {
  z-index: 10005 !important;
}

#ptIncidentPageOverlay .mtd-page {
  padding: 2rem 2.5rem 4rem;
  max-width: 1600px;
  margin: 0 auto;
}

#ptIncidentPageOverlay .mtd-topbar {
  margin-bottom: 0.75rem;
  padding: 0;
}

#ptIncidentPageOverlay .mtd-hero {
  margin-bottom: 1rem;
}

#ptIncidentPageOverlay .mtd-hero-cat {
  font-size: 0.65rem;
  padding: 0.22rem 0.6rem 0.22rem 0.42rem;
  margin-bottom: 0.55rem;
  border-radius: 6px;
}
#ptIncidentPageOverlay .mtd-hero-cat svg {
  width: 10px;
  height: 10px;
}

#ptIncidentPageOverlay .mtd-hero-title {
  font-size: 1.4rem;
  letter-spacing: -0.025em;
  margin-bottom: 0.65rem;
  line-height: 1.25;
  font-weight: 700;
}

#ptIncidentPageOverlay .mtd-hero-chip {
  font-size: 0.7rem;
  padding: 0.3rem 0.65rem;
}
#ptIncidentPageOverlay .mtd-hero-chip svg {
  width: 11px;
  height: 11px;
}

#ptIncidentPageOverlay .mtd-info-card {
  padding: 0.4rem;
  border-radius: 12px;
  margin-bottom: 0.75rem;
}

#ptIncidentPageOverlay .mtd-info-grid {
  gap: 0.4rem;
}

#ptIncidentPageOverlay .mtd-info-cell {
  padding: 0.65rem 0.85rem;
  border-radius: 9px;
  gap: 0.5rem;
}

#ptIncidentPageOverlay .mtd-info-cell-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
}
#ptIncidentPageOverlay .mtd-info-cell-icon svg {
  width: 13px;
  height: 13px;
}

#ptIncidentPageOverlay .mtd-info-label {
  font-size: 0.6rem;
  letter-spacing: 0.075em;
  margin-bottom: 0.18rem;
}

#ptIncidentPageOverlay .mtd-info-value {
  font-size: 0.78rem;
  line-height: 1.3;
}

#ptIncidentPageOverlay .mtd-section {
  padding: 0.85rem 1rem;
  border-radius: 12px;
  margin-bottom: 0.65rem;
}

#ptIncidentPageOverlay .mtd-section-heading-wrap {
  margin-bottom: 0.7rem;
}

#ptIncidentPageOverlay .mtd-section-heading {
  font-size: 0.85rem;
  letter-spacing: -0.01em;
  font-weight: 700;
}

#ptIncidentPageOverlay .mtd-section-sub {
  font-size: 0.7rem;
}

#ptIncidentPageOverlay .mtd-back-btn {
  padding: 0.4rem 0.85rem;
  font-size: 0.72rem;
}
#ptIncidentPageOverlay .mtd-back-btn svg {
  width: 12px;
  height: 12px;
}

#ptIncidentPageOverlay .mtd-crumb-pill {
  padding: 0.3rem 0.7rem 0.3rem 0.45rem;
  font-size: 0.68rem;
}
#ptIncidentPageOverlay .mtd-crumb-pill svg {
  width: 11px;
  height: 11px;
}

/* PT İnsidenti — Hero level badge varianti */
.mtd-hero-cat.pt-level-1 {
  background: linear-gradient(135deg, rgba(39, 174, 96, 0.14), rgba(39, 174, 96, 0.06));
  color: #1B7943;
  border-color: rgba(39, 174, 96, 0.25);
}
.mtd-hero-cat.pt-level-1 svg { color: #1B7943; }

.mtd-hero-cat.pt-level-2 {
  background: linear-gradient(135deg, rgba(230, 126, 34, 0.14), rgba(230, 126, 34, 0.06));
  color: #B86200;
  border-color: rgba(230, 126, 34, 0.25);
}
.mtd-hero-cat.pt-level-2 svg { color: #B86200; }

.mtd-hero-cat.pt-level-3 {
  background: linear-gradient(135deg, rgba(220, 53, 69, 0.14), rgba(220, 53, 69, 0.06));
  color: #A02633;
  border-color: rgba(220, 53, 69, 0.25);
}
.mtd-hero-cat.pt-level-3 svg { color: #A02633; }

.mtd-hero-cat.pt-level-4 {
  background: linear-gradient(135deg, rgba(156, 111, 184, 0.14), rgba(156, 111, 184, 0.06));
  color: #5A3F88;
  border-color: rgba(156, 111, 184, 0.25);
}
.mtd-hero-cat.pt-level-4 svg { color: #5A3F88; }

/* Status chip variantları */
.mtd-hero-chip.status-ongoing {
  background: linear-gradient(135deg, rgba(230, 126, 34, 0.12), rgba(230, 126, 34, 0.05));
  color: #B86200;
  border: 1px solid rgba(230, 126, 34, 0.22);
}
.mtd-hero-chip.status-completed {
  background: linear-gradient(135deg, rgba(39, 174, 96, 0.12), rgba(39, 174, 96, 0.05));
  color: #1B7943;
  border: 1px solid rgba(39, 174, 96, 0.22);
}

/* ================================================================ */
/* TƏSVİR / QEYDLƏR — sadə text bloku                                */
/* ================================================================ */
.pt-incident-text-block {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--apple-text-primary, #0B2E33);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ================================================================ */
/* 3 SƏNƏD KARTI                                                     */
/* ================================================================ */
.pt-incident-docs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  margin-top: 0.1rem;
}

.pt-incident-doc-card {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 0.75rem 0.8rem;
  border: 1px solid rgba(79, 124, 130, 0.12);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.pt-incident-doc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(11, 46, 51, 0.08);
  border-color: rgba(79, 124, 130, 0.26);
}

.pt-incident-doc-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
}

.pt-incident-doc-card[data-doc-color="teal"] .pt-incident-doc-accent {
  background: linear-gradient(90deg, #4F7C82, #93B1B5);
}
.pt-incident-doc-card[data-doc-color="amber"] .pt-incident-doc-accent {
  background: linear-gradient(90deg, #E67E22, #F2A623);
}
.pt-incident-doc-card[data-doc-color="green"] .pt-incident-doc-accent {
  background: linear-gradient(90deg, #1D9E75, #27AE60);
}

.pt-incident-doc-icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.05rem;
}
.pt-incident-doc-icon-wrap svg { width: 14px; height: 14px; }

.pt-incident-doc-card[data-doc-color="teal"] .pt-incident-doc-icon-wrap {
  background: linear-gradient(135deg, #EBF5F6, #B8E3E9);
  color: #0B2E33;
}
.pt-incident-doc-card[data-doc-color="amber"] .pt-incident-doc-icon-wrap {
  background: linear-gradient(135deg, #FAEEDA, #FAC775);
  color: #854F0B;
}
.pt-incident-doc-card[data-doc-color="green"] .pt-incident-doc-icon-wrap {
  background: linear-gradient(135deg, #E1F5EE, #9FE1CB);
  color: #0F6E56;
}

.pt-incident-doc-eyebrow {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pt-incident-doc-card[data-doc-color="teal"] .pt-incident-doc-eyebrow { color: #4F7C82; }
.pt-incident-doc-card[data-doc-color="amber"] .pt-incident-doc-eyebrow { color: #B86200; }
.pt-incident-doc-card[data-doc-color="green"] .pt-incident-doc-eyebrow { color: #1B7943; }

.pt-incident-doc-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--apple-text-primary, #0B2E33);
  line-height: 1.35;
  letter-spacing: -0.01em;
  min-height: 30px;
  display: flex;
  align-items: flex-start;
}

.pt-incident-doc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 0.7rem;
  border-radius: 7px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-top: 0.2rem;
  letter-spacing: -0.005em;
  border: none;
  font-family: inherit;
}
.pt-incident-doc-btn svg { width: 11px; height: 11px; }

.pt-incident-doc-card[data-doc-color="teal"] .pt-incident-doc-btn {
  background: linear-gradient(135deg, #4F7C82, #0B2E33);
  box-shadow: 0 2px 7px rgba(11, 46, 51, 0.14);
}
.pt-incident-doc-card[data-doc-color="amber"] .pt-incident-doc-btn {
  background: linear-gradient(135deg, #E67E22, #B86200);
  box-shadow: 0 2px 7px rgba(184, 98, 0, 0.16);
}
.pt-incident-doc-card[data-doc-color="green"] .pt-incident-doc-btn {
  background: linear-gradient(135deg, #1D9E75, #0F6E56);
  box-shadow: 0 2px 7px rgba(15, 110, 86, 0.16);
}

.pt-incident-doc-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}
.pt-incident-doc-btn:active {
  transform: translateY(0) scale(0.98);
}

.pt-incident-doc-btn.is-disabled {
  background: linear-gradient(135deg, #B0B8BB, #8A9498) !important;
  box-shadow: none !important;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.7;
}

/* ================================================================ */
/* KÖK SƏBƏBLƏR DAİRƏVİ DİAQRAMI                                     */
/* ================================================================ */
.pt-incident-causes-diagram-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 0.25rem 0;
}

.pt-incident-causes-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  text-align: center;
}
.pt-incident-causes-empty-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(79, 124, 130, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4F7C82;
}
.pt-incident-causes-empty-icon svg { width: 20px; height: 20px; }
.pt-incident-causes-empty-text {
  font-size: 0.82rem;
  color: #4F7C82;
  font-weight: 500;
}

.pt-incident-causes-svg {
  width: 100%;
  max-width: 1100px;
  height: auto;
}

.pt-incident-cause-segment {
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  /* Yeni transform origin diaqram mərkəzinin yeni koordinatlarına uyğunlaşdırılır */
  transform-origin: 550px 240px;
}
.pt-incident-cause-segment:hover {
  filter: brightness(1.08);
  transform: scale(1.025);
}

.pt-incident-cause-label-text {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  fill: #0B2E33;
}
.pt-incident-cause-label-num {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.pt-incident-cause-center-text-1 {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  fill: #4F7C82;
  letter-spacing: 0.1em;
}
.pt-incident-cause-center-text-2 {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 700;
  fill: #0B2E33;
}

/* ================================================================ */
/* FƏALİYYƏTLƏR — Yeni Apple Style Modern Dizayn                     */
/* ================================================================ */
.pt-incident-activities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem;
  margin-top: 0.1rem;
}

.pt-incident-activity-card {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFD 100%);
  border-radius: 11px;
  padding: 0.7rem 0.85rem;
  border: 0.5px solid rgba(79, 124, 130, 0.12);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
  transition: all 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(11, 46, 51, 0.04);
  -webkit-tap-highlight-color: transparent;
}

/* Hover background glow effekt */
.pt-incident-activity-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(79, 124, 130, 0.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.pt-incident-activity-card:hover {
  transform: translateY(-2px);
  border-color: rgba(79, 124, 130, 0.22);
  box-shadow: 0 6px 16px rgba(11, 46, 51, 0.07);
}

.pt-incident-activity-card:hover::after {
  opacity: 1;
}

.pt-incident-activity-card:active {
  transform: translateY(0) scale(0.99);
  transition-duration: 0.1s;
}

/* Sol vertikal accent bar */
.pt-incident-activity-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 2.5px;
  border-radius: 0 2.5px 2.5px 0;
  transition: top 0.3s ease, bottom 0.3s ease;
}

.pt-incident-activity-card:hover::before {
  top: 8%;
  bottom: 8%;
}

.pt-incident-activity-card.ongoing::before {
  background: linear-gradient(180deg, #F2A623, #E67E22);
}
.pt-incident-activity-card.completed::before {
  background: linear-gradient(180deg, #27AE60, #1D9E75);
}

.pt-incident-activity-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.pt-incident-activity-icon svg { width: 14px; height: 14px; }

.pt-incident-activity-card.ongoing .pt-incident-activity-icon {
  background: linear-gradient(135deg, rgba(242, 166, 35, 0.16), rgba(230, 126, 34, 0.10));
  color: #B86200;
  box-shadow: inset 0 0 0 0.5px rgba(230, 126, 34, 0.18);
}
.pt-incident-activity-card.completed .pt-incident-activity-icon {
  background: linear-gradient(135deg, rgba(39, 174, 96, 0.16), rgba(29, 158, 117, 0.10));
  color: #1B7943;
  box-shadow: inset 0 0 0 0.5px rgba(39, 174, 96, 0.18);
}

.pt-incident-activity-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.pt-incident-activity-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--apple-text-secondary, #4F7C82);
}

.pt-incident-activity-count {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  line-height: 1;
}

.pt-incident-activity-count-num {
  font-size: 1.2rem;
  font-weight: 700;
  color: #0B2E33;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

.pt-incident-activity-count-suffix {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--apple-text-secondary, #4F7C82);
  letter-spacing: -0.005em;
}

.pt-incident-activity-arrow {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(79, 124, 130, 0.08);
  color: rgba(79, 124, 130, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  position: relative;
  z-index: 1;
}
.pt-incident-activity-arrow svg { width: 11px; height: 11px; stroke-width: 2.5; }

.pt-incident-activity-card.ongoing:hover .pt-incident-activity-arrow {
  background: rgba(230, 126, 34, 0.14);
  color: #B86200;
  transform: translateX(2px);
}
.pt-incident-activity-card.completed:hover .pt-incident-activity-arrow {
  background: rgba(39, 174, 96, 0.14);
  color: #1B7943;
  transform: translateX(2px);
}

/* Boş hal — fəaliyyət yoxdur */
.pt-incident-activity-card.is-empty {
  cursor: default;
  opacity: 0.55;
}
.pt-incident-activity-card.is-empty:hover {
  transform: none;
  border-color: rgba(79, 124, 130, 0.12);
  box-shadow: 0 1px 2px rgba(11, 46, 51, 0.04);
}
.pt-incident-activity-card.is-empty:hover::after { opacity: 0; }
.pt-incident-activity-card.is-empty:hover::before { top: 14%; bottom: 14%; }
.pt-incident-activity-card.is-empty .pt-incident-activity-arrow {
  opacity: 0.4;
}

/* Info cell — Status varianti (mtd-info-cell ilə birgə) */
.mtd-info-cell.pt-status-ongoing {
  background: linear-gradient(135deg, rgba(230, 126, 34, 0.10), rgba(230, 126, 34, 0.04));
  border-color: rgba(230, 126, 34, 0.22);
}
.mtd-info-cell.pt-status-ongoing .mtd-info-cell-icon {
  background: rgba(230, 126, 34, 0.14);
  color: #B86200;
}
.mtd-info-cell.pt-status-ongoing .mtd-info-value {
  color: #B86200;
  font-weight: 700;
}

.mtd-info-cell.pt-status-completed {
  background: linear-gradient(135deg, rgba(39, 174, 96, 0.10), rgba(39, 174, 96, 0.04));
  border-color: rgba(39, 174, 96, 0.22);
}
.mtd-info-cell.pt-status-completed .mtd-info-cell-icon {
  background: rgba(39, 174, 96, 0.14);
  color: #1B7943;
}
.mtd-info-cell.pt-status-completed .mtd-info-value {
  color: #1B7943;
  font-weight: 700;
}

/* Responsive — mobil */
@media (max-width: 768px) {
  .pt-incident-docs-grid,
  .pt-incident-activities-grid {
    grid-template-columns: 1fr;
  }
  .pt-incident-causes-diagram-wrap {
    min-height: 280px;
  }
}

/* Action List Modal */
.moc-action-list-overlay,
.pssr-action-list-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--apple-bg-primary);
  z-index: 10002;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}

.moc-action-list-overlay.visible,
.pssr-action-list-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.moc-action-list-modal,
.pssr-action-list-modal {
  background: transparent;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.moc-action-list-header,
.pssr-action-list-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(79, 124, 130, 0.15);
  box-shadow: 0 2px 16px rgba(11, 46, 51, 0.06);
}

.moc-action-list-header.ongoing,
.pssr-action-list-header.ongoing {
  background: linear-gradient(135deg, rgba(79, 124, 130, 0.1) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.moc-action-list-header.completed,
.pssr-action-list-header.completed {
  background: linear-gradient(135deg, rgba(11, 46, 51, 0.08) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.moc-action-list-header-left,
.pssr-action-list-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.moc-action-list-title-area,
.pssr-action-list-title-area {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.moc-action-list-back,
.pssr-action-list-back {
  display: none;
}

.moc-action-list-title,
.pssr-action-list-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--winter-dark);
  letter-spacing: -0.02em;
}

.moc-action-list-badge,
.pssr-action-list-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--winter-medium);
  color: #FFFFFF;
}

.moc-action-list-badge.completed,
.pssr-action-list-badge.completed {
  background: var(--winter-dark);
}

.moc-action-list-close,
.pssr-action-list-close {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(79, 124, 130, 0.1);
  border: 1px solid rgba(79, 124, 130, 0.2);
  border-radius: 12px;
  padding: 0.65rem 1.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--winter-dark);
}

.moc-action-list-close:hover,
.pssr-action-list-close:hover {
  background: rgba(79, 124, 130, 0.18);
  border-color: rgba(79, 124, 130, 0.35);
}

.moc-action-list-close svg,
.pssr-action-list-close svg {
  width: 18px;
  height: 18px;
  color: var(--winter-dark);
}

.moc-action-list-body,
.pssr-action-list-body {
  padding: 1.5rem 2rem;
  flex: 1;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 768px) {
  .moc-action-list-body,
  .pssr-action-list-body {
    padding: 1rem;
    overflow-x: auto;
  }
}

/* Action Table */
.moc-action-table-wrapper,
.pssr-action-table-wrapper {
  overflow-x: auto;
}

.moc-action-table,
.pssr-action-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.moc-action-table th,
.pssr-action-table th {
  background: rgba(79, 124, 130, 0.06);
  padding: 0.85rem 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--winter-dark);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid rgba(79, 124, 130, 0.12);
  white-space: nowrap;
}

.moc-action-table td,
.pssr-action-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(79, 124, 130, 0.08);
  color: var(--apple-text-primary);
  vertical-align: middle;
}

.moc-action-table tr:hover,
.pssr-action-table tr:hover {
  background: rgba(79, 124, 130, 0.03);
}

.moc-action-table .status-cell,
.pssr-action-table .status-cell {
  font-weight: 600;
  font-size: 0.75rem;
}

.moc-action-table .status-cell.ongoing,
.pssr-action-table .status-cell.ongoing {
  color: var(--apple-orange);
}

.moc-action-table .status-cell.completed,
.pssr-action-table .status-cell.completed {
  color: var(--apple-green);
}

.moc-action-list-empty,
.pssr-action-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--apple-text-tertiary);
}

.moc-action-list-empty svg,
.pssr-action-list-empty svg {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  opacity: 0.5;
}

/* Responsive */
@media (max-width: 768px) {
  .moc-overlay-content,
  .pssr-overlay-content {
    padding: 1rem;
  }

  .moc-stats-row,
  .pssr-stats-row {
    flex-wrap: wrap;
  }

  .moc-filters-row,
  .pssr-filters-row {
    flex-direction: column;
  }

  .moc-filter-chip select,
  .pssr-filter-chip select {
    width: 100%;
  }

  .moc-card-item,
  .pssr-card-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .moc-detail-info-grid,
  .pssr-detail-info-grid {
    grid-template-columns: 1fr;
  }

  .moc-activities-grid,
  .pssr-activities-grid {
    grid-template-columns: 1fr;
  }
}

  /* ════════════════════════════════════════════════════════════
     HƏFTƏLİK İCMAL · Modal & Module
     Tam ekran modal, sol: zaman xətti, sağ: xəbər axını
     ════════════════════════════════════════════════════════════ */

  /* Header chip (Modullar yanında) — Modullarla eyni stildə */
  /* Modullar + Həftəlik İcmal chip-ini yan-yana saxlayan flex-row container */
  .nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .weekly-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(79, 124, 130, 0.07);
    border: 1px solid rgba(79, 124, 130, 0.15);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--winter-dark);
    letter-spacing: -0.01em;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .weekly-trigger:hover {
    background: rgba(79, 124, 130, 0.13);
    border-color: rgba(79, 124, 130, 0.25);
    box-shadow: 0 2px 12px -3px rgba(11, 46, 51, 0.12);
  }
  .weekly-trigger:active { transform: scale(0.97); }
  .weekly-trigger .wt-icon { width: 18px; height: 18px; opacity: 0.7; flex-shrink: 0; }

  /* ===================== MODAL OVERLAY ===================== */
  /* Tam səhifə formatı — overlay yox, səhifə keçidi kimi davranır */
  .weekly-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    background: linear-gradient(180deg, #F4FAFB 0%, #E5F2F4 50%, #F4FAFB 100%);
    opacity: 0;
    transition: opacity 0.28s cubic-bezier(0.25, 0.1, 0.25, 1);
    padding: 0;
    overflow: hidden;
  }
  .weekly-modal-overlay.is-open {
    display: block;
    opacity: 1;
  }
  body.weekly-modal-open { overflow: hidden; }

  .weekly-modal {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    transform: translateY(10px);
    transition: transform 0.32s cubic-bezier(0.25, 0.1, 0.25, 1);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
    overflow: hidden;
  }
  .weekly-modal-overlay.is-open .weekly-modal {
    transform: translateY(0);
  }

  /* Close button: sağ üst küncdə, header-in dik ortasında — "Şəxslər üzrə yekun"
     düyməsi ilə üst-üstə düşməməsi üçün wo-header padding-right artırılıb.
     Vertical mərkəz: header padding-top (20px) + content yarısı (~22px) = ~42px;
     button hündürlüyü 34px → top = 42 - 17 = 25px. */
  .weekly-modal-close {
    position: absolute;
    top: 22px;
    right: 18px;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(79, 124, 130, 0.2);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--winter-dark);
    cursor: pointer;
    z-index: 100;
    box-shadow: 0 2px 6px rgba(11, 46, 51, 0.06);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.18s ease, box-shadow 0.18s;
    font-family: inherit;
  }
  .weekly-modal-close:hover {
    background: #fff;
    transform: rotate(90deg);
    box-shadow: 0 4px 12px rgba(11, 46, 51, 0.12);
  }

  /* ===================== TWO-COLUMN PANELS ===================== */
  .weekly-panel {
    background: var(--apple-bg-secondary);
    border-radius: 0;
    box-shadow: none;
    border: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
    flex: 1 1 0;
    max-height: 100vh;
    max-height: 100dvh;
    position: relative;
    z-index: 1;
  }
  /* Timeline panel takes full width */

  /* ===================== LOCAL TONE TOKENS ===================== */
  /* Bu dəyişənlər həm əsas həftəlik icmal modal-ında, həm də şəxs yekun
     overlay-ində eyni cür işləməlidir. İki konteyner DOM-da qardaşdır,
     ona görə hər ikisinə tətbiq edirik. */
  .weekly-modal,
  .wo-person-overlay {
    --wo-teal-bg:    #D4ECEE;  --wo-teal-fg:    #2D6970;
    --wo-amber-bg:   #F7E4CE;  --wo-amber-fg:   #A36019;
    --wo-sky-bg:     #D6E6EF;  --wo-sky-fg:     #2E5E80;
    --wo-lavender-bg:#DDE2F1;  --wo-lavender-fg:#4B5788;
    --wo-coral-bg:   #F3D6D6;  --wo-coral-fg:   #9E3D3D;
    --wo-sand-bg:    #E7DFCD;  --wo-sand-fg:    #7C6332;
    --wo-slate-bg:   #D9E2E4;  --wo-slate-fg:   #3D5A5F;
    --wo-mint-bg:    #D4E8DA;  --wo-mint-fg:    #2F6B4A;
    --wo-emerald-bg: #D1FAE5;  --wo-emerald-fg: #065F46;
    --wo-indigo-bg:  #E0E7FF;  --wo-indigo-fg:  #3730A3;
    --wo-stone-bg:   #E7E5E4;  --wo-stone-fg:   #57534E;
    --wo-news-incident-bg: #F3D6D6; --wo-news-incident-fg: #9E3D3D;
    --wo-news-alert-bg:    #F7E4CE; --wo-news-alert-fg:    #A36019;
    --wo-news-training-bg: #D6E6EF; --wo-news-training-fg: #2E5E80;
    --wo-news-bulletin-bg: #DDE2F1; --wo-news-bulletin-fg: #4B5788;
    --wo-border: rgba(79, 124, 130, 0.15);
    --wo-spine: rgba(79, 124, 130, 0.18);
    --wo-accent: var(--winter-medium);
    --wo-accent-strong: var(--winter-dark);
    --wo-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --wo-ease-smooth: cubic-bezier(.25, .1, .25, 1);
  }

  /* ===================== ADD / EDIT FORM (Supabase CRUD) ===================== */
  .wo-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--wo-border);
    background: rgba(255,255,255,0.85);
    color: var(--winter-dark);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.12s;
    font-family: inherit;
  }
  .wo-add-btn:hover { background: #fff; border-color: rgba(79,124,130,0.35); }
  .wo-add-btn:active { transform: scale(0.97); }
  .wo-add-btn svg { width: 14px; height: 14px; }

  .wo-form-overlay {
    position: absolute;
    inset: 0;
    background: rgba(11, 46, 51, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  .wo-form-overlay.is-open {
    display: flex;
    opacity: 1;
  }
  .wo-form-card {
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 4rem);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(11,46,51,0.22), 0 0 0 1px rgba(79,124,130,0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.95) translateY(8px);
    transition: transform 0.25s var(--wo-ease-spring);
  }
  .wo-form-overlay.is-open .wo-form-card { transform: scale(1) translateY(0); }
  .wo-form-header {
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--wo-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .wo-form-title { font-size: 1.05rem; font-weight: 700; color: var(--apple-text-primary); letter-spacing: -0.01em; }
  .wo-form-close {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid var(--wo-border);
    background: #fff;
    color: var(--apple-text-secondary);
    cursor: pointer;
    font-size: 18px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s, color 0.18s;
  }
  .wo-form-close:hover { color: var(--winter-dark); transform: rotate(90deg); }

  .wo-form-body {
    padding: 1.2rem 1.4rem;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
  }
  .wo-field { display: flex; flex-direction: column; gap: 0.3rem; }
  .wo-field.is-full { grid-column: 1 / -1; }
  .wo-field label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--apple-text-tertiary);
  }
  .wo-field input,
  .wo-field select,
  .wo-field textarea {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--wo-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--apple-text-primary);
    background: #fff;
    transition: border-color 0.18s, box-shadow 0.18s;
    width: 100%;
  }
  .wo-field input:focus,
  .wo-field select:focus,
  .wo-field textarea:focus {
    outline: none;
    border-color: var(--winter-medium);
    box-shadow: 0 0 0 3px rgba(79,124,130,0.12);
  }
  .wo-field textarea { min-height: 80px; resize: vertical; font-family: inherit; }
  .wo-field-checkbox {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--wo-border);
    border-radius: 8px;
    background: rgba(79,124,130,0.04);
  }
  .wo-field-checkbox input { width: auto; margin: 0; }
  .wo-field-checkbox label { font-size: 0.85rem; color: var(--apple-text-primary); text-transform: none; letter-spacing: 0; font-weight: 500; cursor: pointer; }

  .wo-form-footer {
    padding: 0.9rem 1.4rem;
    border-top: 1px solid var(--wo-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: rgba(79,124,130,0.03);
  }
  .wo-form-error {
    font-size: 0.78rem;
    color: #9E3D3D;
    flex: 1;
    line-height: 1.35;
  }
  .wo-form-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
  .wo-btn {
    padding: 0.55rem 1.05rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.18s, transform 0.12s, opacity 0.18s;
  }
  .wo-btn:disabled { opacity: 0.55; cursor: not-allowed; }
  .wo-btn-secondary {
    background: #fff;
    border-color: var(--wo-border);
    color: var(--apple-text-secondary);
  }
  .wo-btn-secondary:hover:not(:disabled) { background: rgba(79,124,130,0.07); }
  .wo-btn-primary {
    background: var(--winter-dark);
    color: #fff;
  }
  .wo-btn-primary:hover:not(:disabled) { background: #0b2e33; transform: translateY(-1px); }
  .wo-btn-danger {
    background: #fff;
    border-color: rgba(158,61,61,0.3);
    color: #9E3D3D;
  }
  .wo-btn-danger:hover:not(:disabled) { background: rgba(158,61,61,0.08); }

  /* "Yeni" düyməsi panel header-ində */
  .wo-news-header { position: relative; }
  .wo-news-header-actions { display: flex; align-items: center; gap: 0.4rem; }

  /* Owner badge (yalnız öz entry-lərində görünür) */
  .wo-owner-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.5rem;
  }
  .wo-icon-btn {
    width: 24px; height: 24px;
    border-radius: 6px;
    border: 1px solid var(--wo-border);
    background: rgba(255,255,255,0.85);
    color: var(--apple-text-secondary);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.18s, color 0.18s;
    padding: 0;
  }
  .wo-icon-btn:hover { background: #fff; color: var(--winter-dark); }
  .wo-icon-btn svg { width: 12px; height: 12px; }
  .wo-icon-btn.is-danger:hover { color: #9E3D3D; border-color: rgba(158,61,61,0.3); }

  @media (max-width: 600px) {
    .wo-form-body { grid-template-columns: 1fr; }
    .wo-form-overlay { padding: 0.5rem; }
    .wo-form-card { max-height: calc(100vh - 1rem); }
  }

  /* ===================== LEFT: TIMELINE PANEL ===================== */
  .wo-header {
    /* Sağ kənar: × bağla düyməsinin (34px wide + 18px right offset = 52px)
       üzərinə oturmaması üçün sağda ~70px boşluq saxlanır. */
    padding: 1.25rem 4.5rem 1.1rem 1.75rem;
    border-bottom: 1px solid var(--wo-border);
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem;
    background: linear-gradient(180deg, rgba(184,227,233,0.22) 0%, transparent 100%);
    position: relative;
    z-index: 1;
  }
  .wo-header-text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1; }
  .wo-eyebrow { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--apple-text-tertiary); font-weight: 700; }
  .wo-title { font-size: 1.25rem; font-weight: 700; color: var(--apple-text-primary); letter-spacing: -0.02em; line-height: 1.2; }
  .wo-subtitle { font-size: 0.8125rem; color: var(--apple-text-secondary); margin-top: 0.15rem; }
  .wo-header-right { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; flex-wrap: wrap; }

  /* ===================== HƏFTƏ NAVIQATORU ===================== */
  .wo-week-nav {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(79, 124, 130, 0.08);
    border: 1px solid var(--wo-border);
    border-radius: 10px;
    padding: 3px;
  }
  .wo-week-btn {
    border: none;
    background: transparent;
    color: var(--apple-text-primary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 0.35rem 0.55rem;
    border-radius: 7px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, transform .18s var(--wo-ease-spring);
    -webkit-tap-highlight-color: transparent;
  }
  .wo-week-btn svg { width: 16px; height: 16px; }
  .wo-week-btn:hover { background: rgba(79, 124, 130, 0.18); }
  .wo-week-btn:active { transform: scale(0.94); }
  .wo-week-today { padding: 0.35rem 0.75rem; }
  .wo-week-today.is-current {
    background: var(--wo-accent);
    color: #fff;
    cursor: default;
  }
  .wo-week-today.is-current:hover { background: var(--wo-accent); }
  .wo-week-btn:disabled { opacity: 0.85; }

  /* ===================== GÜN FİLTERİ (day-count pills) ===================== */
  .wo-day-counts { display: flex; gap: 0.3rem; flex-wrap: wrap; }
  .wo-day-count {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.55rem 0.3rem 0.65rem;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    background: rgba(79, 124, 130, 0.08);
    color: var(--apple-text-secondary);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .18s var(--wo-ease-spring);
    -webkit-tap-highlight-color: transparent;
  }
  .wo-day-count:hover {
    background: rgba(79, 124, 130, 0.16);
    transform: translateY(-1px);
  }
  .wo-day-count .wo-dc-day { font-weight: 700; }
  .wo-day-count .wo-dc-num {
    display: inline-flex;
    align-items: center; justify-content: center;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: rgba(79, 124, 130, 0.18);
    color: var(--apple-text-primary);
    font-size: 0.65rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
  }
  .wo-day-count[data-has="1"] {
    background: rgba(79, 124, 130, 0.14);
    color: var(--apple-text-primary);
  }
  .wo-day-count[data-has="1"] .wo-dc-num {
    background: var(--wo-accent);
    color: #fff;
  }
  .wo-day-count[data-today="1"] {
    outline: 2px solid var(--winter-lightest);
    outline-offset: 1px;
  }
  .wo-day-count[data-selected="1"] {
    background: var(--wo-accent-strong);
    color: #fff;
    border-color: transparent;
  }
  .wo-day-count[data-selected="1"] .wo-dc-num {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
  }

  /* ===================== AKTİV FİLTER BANNERI ===================== */
  .wo-active-filters {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.55rem 0;
    margin-bottom: 0.75rem;
    border-bottom: 1px dashed var(--wo-border);
    padding-bottom: 0.85rem;
  }
  .wo-chip-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.35rem 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(184, 227, 233, 0.4);
    border: 1px solid rgba(79, 124, 130, 0.22);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--apple-text-primary);
    letter-spacing: -0.01em;
  }
  .wo-chip-x {
    width: 18px; height: 18px;
    border: none;
    background: rgba(79, 124, 130, 0.18);
    color: var(--apple-text-primary);
    border-radius: 50%;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: inherit;
    transition: background .15s, transform .2s var(--wo-ease-spring);
  }
  .wo-chip-x:hover { background: rgba(79, 124, 130, 0.32); transform: rotate(90deg); }

  /* ===================== DRAWER · sadələşdirilmiş incident göstəricisi ===================== */
  .wo-drawer-ref {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: rgba(79, 124, 130, 0.10);
    border: 1px solid var(--wo-border);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--apple-text-primary);
    letter-spacing: 0.01em;
  }

  .wo-live {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.75rem; color: var(--apple-text-secondary);
    padding: 0.3rem 0.7rem; border-radius: 999px;
    background: rgba(79, 124, 130, 0.10);
    border: 1px solid var(--wo-border);
    font-weight: 500;
  }
  .wo-live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--wo-accent);
    animation: wo-pulse 2.2s ease-out infinite;
  }
  @keyframes wo-pulse {
    0% { box-shadow: 0 0 0 0 rgba(79, 124, 130, 0.55); }
    70% { box-shadow: 0 0 0 6px rgba(79, 124, 130, 0); }
    100% { box-shadow: 0 0 0 0 rgba(79, 124, 130, 0); }
  }

  .wo-filters {
    display: flex; gap: 0.4rem;
    padding: 0.85rem 1.75rem;
    border-bottom: 1px solid var(--wo-border);
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: wrap;
  }
  .wo-filters::-webkit-scrollbar { display: none; }
  .wo-filter {
    padding: 0.4rem 0.85rem; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
    background: rgba(79, 124, 130, 0.08);
    color: var(--apple-text-secondary);
    border: 1px solid transparent;
    cursor: pointer; white-space: nowrap; font-family: inherit;
    transition: background .18s, color .18s, transform .2s var(--wo-ease-spring);
  }
  .wo-filter:hover { background: rgba(79, 124, 130, 0.14); transform: translateY(-1px); }
  .wo-filter.is-active { background: var(--wo-accent-strong); color: #fff; }

  .wo-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    padding: 1.5rem 1.75rem 1.75rem;
    scroll-behavior: smooth;
  }
  .wo-body::-webkit-scrollbar { width: 8px; }
  .wo-body::-webkit-scrollbar-track { background: transparent; }
  .wo-body::-webkit-scrollbar-thumb { background: rgba(79, 124, 130, 0.22); border-radius: 4px; }
  .wo-body::-webkit-scrollbar-thumb:hover { background: rgba(79, 124, 130, 0.4); }

  .wo-timeline { position: relative; padding-left: 84px; }
  .wo-spine {
    position: absolute; top: 8px; bottom: 8px; left: 72px; width: 2px;
    background: linear-gradient(180deg, transparent 0%, var(--wo-spine) 8%, var(--wo-spine) 92%, transparent 100%);
    border-radius: 1px;
  }
  .wo-day { position: relative; margin-bottom: 1.25rem; min-height: 64px; animation: wo-fade-in .45s var(--wo-ease-smooth) both; }
  .wo-day:last-child { margin-bottom: 0; }
  @keyframes wo-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
  .wo-day-marker { position: absolute; left: -84px; top: 0; width: 64px; text-align: right; user-select: none; }
  .wo-day-short { font-size: 0.875rem; font-weight: 700; color: var(--apple-text-primary); letter-spacing: -0.01em; line-height: 1.15; }
  .wo-day-date  { font-size: 0.75rem; color: var(--apple-text-tertiary); margin-top: 0.15rem; }
  .wo-day-today { display: inline-block; margin-top: 0.35rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--wo-accent); padding: 0.12rem 0.4rem; border-radius: 4px; }
  .wo-day-node {
    position: absolute; left: -14px; top: 5px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--apple-bg-secondary);
    border: 2px solid rgba(79, 124, 130, 0.35);
    z-index: 1;
  }
  .wo-day-node.has-items { border-color: var(--wo-accent); box-shadow: 0 0 0 4px rgba(79, 124, 130, 0.08); }
  .wo-day-node.is-today { border-color: var(--wo-accent-strong); background: var(--wo-accent); animation: wo-pulse 2.2s ease-out infinite; }
  .wo-empty-day { font-size: 0.8125rem; color: rgba(61, 90, 95, 0.5); font-style: italic; padding: 0.15rem 0; }

  .wo-jobs { display: flex; flex-direction: column; gap: 0.55rem; }
  .wo-job {
    display: flex; align-items: stretch;
    background: var(--apple-bg-secondary);
    border: 1px solid var(--wo-border);
    border-radius: 12px;
    overflow: hidden; cursor: pointer; will-change: transform;
    transition: transform .25s var(--wo-ease-spring), box-shadow .25s, border-color .2s;
  }
  .wo-job:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(11,46,51,.08); border-color: rgba(79, 124, 130, 0.3); }
  .wo-job:active { transform: translateY(0); }
  .wo-job-stripe { width: 4px; flex-shrink: 0; background: var(--wo-slate-fg); }
  .wo-job-body { flex: 1; min-width: 0; padding: 0.7rem 0.95rem; display: flex; align-items: center; gap: 0.85rem; }
  .wo-job-time { font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--apple-text-secondary); flex-shrink: 0; width: 48px; letter-spacing: -0.01em; }
  .wo-pill {
    display: inline-flex; align-items: center;
    padding: 0.18rem 0.55rem; border-radius: 999px;
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; white-space: nowrap; flex-shrink: 0; line-height: 1.4;
  }
  .wo-pill[data-tone="teal"]     { background: var(--wo-teal-bg);     color: var(--wo-teal-fg); }
  .wo-pill[data-tone="amber"]    { background: var(--wo-amber-bg);    color: var(--wo-amber-fg); }
  .wo-pill[data-tone="sky"]      { background: var(--wo-sky-bg);      color: var(--wo-sky-fg); }
  .wo-pill[data-tone="lavender"] { background: var(--wo-lavender-bg); color: var(--wo-lavender-fg); }
  .wo-pill[data-tone="coral"]    { background: var(--wo-coral-bg);    color: var(--wo-coral-fg); }
  .wo-pill[data-tone="sand"]     { background: var(--wo-sand-bg);     color: var(--wo-sand-fg); }
  .wo-pill[data-tone="slate"]    { background: var(--wo-slate-bg);    color: var(--wo-slate-fg); }
  .wo-pill[data-tone="mint"]     { background: var(--wo-mint-bg);     color: var(--wo-mint-fg); }
  .wo-pill[data-tone="emerald"]  { background: var(--wo-emerald-bg);  color: var(--wo-emerald-fg); }
  .wo-pill[data-tone="indigo"]   { background: var(--wo-indigo-bg);   color: var(--wo-indigo-fg); }
  .wo-pill[data-tone="stone"]    { background: var(--wo-stone-bg);    color: var(--wo-stone-fg); }
  .wo-job[data-tone="teal"]     .wo-job-stripe { background: var(--wo-teal-fg); }
  .wo-job[data-tone="amber"]    .wo-job-stripe { background: var(--wo-amber-fg); }
  .wo-job[data-tone="sky"]      .wo-job-stripe { background: var(--wo-sky-fg); }
  .wo-job[data-tone="lavender"] .wo-job-stripe { background: var(--wo-lavender-fg); }
  .wo-job[data-tone="coral"]    .wo-job-stripe { background: var(--wo-coral-fg); }
  .wo-job[data-tone="sand"]     .wo-job-stripe { background: var(--wo-sand-fg); }
  .wo-job[data-tone="slate"]    .wo-job-stripe { background: var(--wo-slate-fg); }
  .wo-job[data-tone="mint"]     .wo-job-stripe { background: var(--wo-mint-fg); }
  .wo-job[data-tone="emerald"]  .wo-job-stripe { background: var(--wo-emerald-fg); }
  .wo-job[data-tone="indigo"]   .wo-job-stripe { background: var(--wo-indigo-fg); }
  .wo-job[data-tone="stone"]    .wo-job-stripe { background: var(--wo-stone-fg); }
  .wo-job-main { flex: 1; min-width: 0; }
  .wo-job-title { font-size: 0.9375rem; font-weight: 600; color: var(--apple-text-primary); letter-spacing: -0.01em; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wo-job-meta { font-size: 0.75rem; color: var(--apple-text-tertiary); margin-top: 0.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wo-job-incident { color: var(--wo-accent-strong); font-weight: 600; }
  .wo-job-id { font-size: 0.6875rem; color: rgba(61, 90, 95, 0.5); font-variant-numeric: tabular-nums; flex-shrink: 0; letter-spacing: 0.02em; }

  /* ════════════════════════════════════════════════════════════════
     CALENDAR GRID · Notion-style 7-day week view
     ════════════════════════════════════════════════════════════════ */
  .wo-cal {
    --cal-hour-h: 56px;          /* Hər saatın hündürlüyü (px) */
    --cal-start-hour: 8;         /* Başlanğıc saat */
    --cal-end-hour: 20;          /* Son saat (exclusive üst sərhəd) */
    --cal-time-col: 56px;        /* Sol saat sütununun eni */
    --cal-day-min: 0;            /* min-width gün sütunu */
    --cal-border: rgba(79, 124, 130, 0.14);
    --cal-border-strong: rgba(79, 124, 130, 0.22);
    --cal-hairline: rgba(79, 124, 130, 0.08);
    position: relative;
    background: var(--apple-bg-secondary);
    border-radius: 14px;
    border: 1px solid var(--wo-border);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(11, 46, 51, 0.04);
    animation: wo-fade-in .35s var(--wo-ease-smooth) both;
  }

  /* Header satrı: gün adları + tarix */
  .wo-cal-header {
    display: grid;
    grid-template-columns: var(--cal-time-col) repeat(7, minmax(var(--cal-day-min), 1fr));
    border-bottom: 1px solid var(--cal-border);
    background: linear-gradient(180deg, rgba(244,250,251,0.6) 0%, transparent 100%);
    position: sticky; top: 0; z-index: 10;
  }
  .wo-cal-header-spacer { border-right: 1px solid var(--cal-hairline); }
  .wo-cal-day-head {
    padding: 0.7rem 0.6rem 0.65rem;
    border-right: 1px solid var(--cal-hairline);
    text-align: center;
    cursor: pointer;
    transition: background .18s;
  }
  .wo-cal-day-head:last-child { border-right: none; }
  .wo-cal-day-head:hover { background: rgba(79, 124, 130, 0.05); }
  .wo-cal-day-head[data-selected="1"] { background: rgba(79, 124, 130, 0.10); }
  .wo-cal-day-head-name {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--apple-text-tertiary);
    line-height: 1;
  }
  .wo-cal-day-head[data-today="1"] .wo-cal-day-head-name { color: var(--wo-accent-strong); }
  .wo-cal-day-head-date {
    margin-top: 0.4rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--apple-text-primary);
    letter-spacing: -0.02em;
    line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
  }
  .wo-cal-day-head[data-today="1"] .wo-cal-day-head-date {
    background: var(--wo-accent-strong); color: #fff;
  }
  .wo-cal-day-count {
    margin-top: 0.3rem;
    font-size: 0.6875rem;
    color: var(--apple-text-tertiary);
    font-weight: 500;
    line-height: 1;
    min-height: 0.7rem;
  }
  .wo-cal-day-count[data-has="1"] { color: var(--wo-accent-strong); font-weight: 600; }

  /* All-day satrı (saatı olmayan tasklar) */
  .wo-cal-allday {
    display: grid;
    grid-template-columns: var(--cal-time-col) repeat(7, minmax(var(--cal-day-min), 1fr));
    border-bottom: 1px solid var(--cal-border);
    min-height: 36px;
    background: rgba(244, 250, 251, 0.4);
  }
  .wo-cal-allday-label {
    padding: 0.5rem 0.5rem 0.5rem 0;
    text-align: right;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--apple-text-tertiary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-right: 1px solid var(--cal-hairline);
    align-self: center;
  }
  .wo-cal-allday-cell {
    border-right: 1px solid var(--cal-hairline);
    padding: 4px;
    display: flex; flex-direction: column; gap: 3px;
    min-height: 28px;
  }
  .wo-cal-allday-cell:last-child { border-right: none; }
  .wo-cal-allday-empty { display: none; }

  /* Body — saat satrları + gün sütunları */
  .wo-cal-body {
    display: grid;
    grid-template-columns: var(--cal-time-col) 1fr;
    position: relative;
    /* 08:00 etiketi yuxarıdan, 20:00 etiketi aşağıdan calendar sərhədinə
       yapışmasın deyə kiçik nəfəs payı saxlayırıq. */
    padding-top: 10px;
    padding-bottom: 12px;
  }
  .wo-cal-times {
    border-right: 1px solid var(--cal-hairline);
    position: relative;
  }
  .wo-cal-time-label {
    position: absolute;
    right: 8px;
    transform: translateY(-50%);
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--apple-text-tertiary);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    pointer-events: none;
  }
  /* İlk və son etiketləri grid sərhədlərində kəsilmədən göstərmək üçün xüsusi tənzim */
  .wo-cal-time-label[data-pos="first"] { transform: translateY(0); }
  .wo-cal-time-label[data-pos="last"]  { transform: translateY(-100%); }

  /* Gün sütunları konteyneri */
  .wo-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(var(--cal-day-min), 1fr));
    position: relative;
  }
  .wo-cal-day-col {
    position: relative;
    border-right: 1px solid var(--cal-hairline);
  }
  .wo-cal-day-col:last-child { border-right: none; }
  .wo-cal-day-col[data-today="1"] {
    background: linear-gradient(180deg, rgba(79, 124, 130, 0.025) 0%, rgba(79, 124, 130, 0.01) 100%);
  }
  .wo-cal-day-col[data-weekend="1"] {
    background: rgba(244, 250, 251, 0.4);
  }

  /* Hər saat üçün üfüqi xətt */
  .wo-cal-hour-line {
    position: absolute;
    left: 0; right: 0;
    border-top: 1px solid var(--cal-hairline);
    pointer-events: none;
  }
  .wo-cal-hour-line[data-half="1"] {
    border-top: 1px dashed rgba(79, 124, 130, 0.05);
  }

  /* "İndi" qırmızı xətti */
  .wo-cal-now {
    position: absolute;
    left: 0; right: 0;
    height: 0;
    border-top: 2px solid var(--apple-red, #C45C5C);
    z-index: 5;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(196, 92, 92, 0.25);
  }
  .wo-cal-now::before {
    content: '';
    position: absolute;
    left: -5px; top: -6px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--apple-red, #C45C5C);
    box-shadow: 0 0 0 3px rgba(196, 92, 92, 0.18);
  }

  /* Event blokları (absolute pozisiyalı) */
  .wo-cal-event {
    position: absolute;
    left: 4px; right: 4px;
    border-radius: 8px;
    padding: 5px 8px 6px;
    cursor: pointer;
    overflow: hidden;
    background: var(--apple-bg-secondary);
    border: 1px solid var(--wo-border);
    border-left: 3px solid var(--wo-slate-fg);
    transition: transform .18s var(--wo-ease-spring), box-shadow .18s, z-index 0s;
    will-change: transform;
    z-index: 2;
    display: flex; flex-direction: column;
    min-height: 22px;
  }
  .wo-cal-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(11, 46, 51, 0.10);
    z-index: 6;
  }
  .wo-cal-event[data-tone="teal"]     { background: var(--wo-teal-bg);     border-left-color: var(--wo-teal-fg); }
  .wo-cal-event[data-tone="amber"]    { background: var(--wo-amber-bg);    border-left-color: var(--wo-amber-fg); }
  .wo-cal-event[data-tone="sky"]      { background: var(--wo-sky-bg);      border-left-color: var(--wo-sky-fg); }
  .wo-cal-event[data-tone="lavender"] { background: var(--wo-lavender-bg); border-left-color: var(--wo-lavender-fg); }
  .wo-cal-event[data-tone="coral"]    { background: var(--wo-coral-bg);    border-left-color: var(--wo-coral-fg); }
  .wo-cal-event[data-tone="sand"]     { background: var(--wo-sand-bg);     border-left-color: var(--wo-sand-fg); }
  .wo-cal-event[data-tone="slate"]    { background: var(--wo-slate-bg);    border-left-color: var(--wo-slate-fg); }
  .wo-cal-event[data-tone="mint"]     { background: var(--wo-mint-bg);     border-left-color: var(--wo-mint-fg); }
  .wo-cal-event[data-tone="emerald"]  { background: var(--wo-emerald-bg);  border-left-color: var(--wo-emerald-fg); }
  .wo-cal-event[data-tone="indigo"]   { background: var(--wo-indigo-bg);   border-left-color: var(--wo-indigo-fg); }
  .wo-cal-event[data-tone="stone"]    { background: var(--wo-stone-bg);    border-left-color: var(--wo-stone-fg); }

  .wo-cal-event-time {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--apple-text-secondary);
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 2px;
    flex-shrink: 0;
  }
  .wo-cal-event-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--apple-text-primary);
    line-height: 1.25;
    letter-spacing: -0.005em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
  }
  .wo-cal-event-meta {
    font-size: 0.625rem;
    color: var(--apple-text-tertiary);
    margin-top: 2px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Qısa eventlər (height < 36px) — kompakt: tək sətir, zaman + başlıq yan-yana */
  .wo-cal-event[data-density="compact"] {
    padding: 3px 7px;
    flex-direction: row; align-items: center; gap: 6px;
  }
  .wo-cal-event[data-density="compact"] .wo-cal-event-time {
    margin-bottom: 0; flex-shrink: 0;
  }
  .wo-cal-event[data-density="compact"] .wo-cal-event-title {
    font-size: 0.6875rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
  }
  .wo-cal-event[data-density="compact"] .wo-cal-event-meta { display: none; }

  /* Orta eventlər (36 ≤ height < 70px) — iki sətir: zaman üstdə, başlıq altda (tək sətir).
     60 dəq task burada düşür: rahat sığır, meta isə tooltip-də qalır. */
  .wo-cal-event[data-density="medium"] {
    padding: 4px 8px;
    flex-direction: column;
    gap: 1px;
  }
  .wo-cal-event[data-density="medium"] .wo-cal-event-time {
    margin-bottom: 1px;
  }
  .wo-cal-event[data-density="medium"] .wo-cal-event-title {
    -webkit-line-clamp: 1;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.75rem;
  }
  .wo-cal-event[data-density="medium"] .wo-cal-event-meta { display: none; }

  /* Owner action düymələri (edit/delete) — hover-də görünür */
  .wo-cal-event .wo-owner-actions,
  .wo-cal-allday-event .wo-owner-actions {
    position: absolute;
    top: 4px;
    right: 4px;
    margin-left: 0;
    gap: 2px;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.15s, transform 0.15s;
    pointer-events: none;
    z-index: 3;
  }
  .wo-cal-event:hover .wo-owner-actions,
  .wo-cal-allday-event:hover .wo-owner-actions,
  .wo-cal-event:focus-within .wo-owner-actions,
  .wo-cal-allday-event:focus-within .wo-owner-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .wo-cal-event .wo-icon-btn,
  .wo-cal-allday-event .wo-icon-btn {
    width: 20px; height: 20px;
    border-radius: 5px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 1px 3px rgba(11,46,51,0.10);
  }
  .wo-cal-event .wo-icon-btn svg,
  .wo-cal-allday-event .wo-icon-btn svg {
    width: 10px; height: 10px;
  }
  /* Compact (qısa, <36px) eventlərdə də edit/delete düymələri görünür —
     hover zamanı blok genişlənir və düymələr başlığın sağında uyğunlaşır.
     Düymələr daha kiçik ölçü ilə render olunur ki, dar blokda sığsın. */
  .wo-cal-event[data-compact="1"] .wo-owner-actions {
    top: 2px;
    right: 2px;
    gap: 1px;
  }
  .wo-cal-event[data-compact="1"] .wo-icon-btn {
    width: 16px; height: 16px;
    border-radius: 4px;
  }
  .wo-cal-event[data-compact="1"] .wo-icon-btn svg {
    width: 8px; height: 8px;
  }
  /* Compact blok hover olunanda mətn düymələrlə üst-üstə düşməsin deyə
     başlıq sahəsinə kifayət qədər sağ boşluq verilir (2 düymə ≈ 38px). */
  .wo-cal-event[data-compact="1"]:hover .wo-cal-event-title,
  .wo-cal-event[data-compact="1"]:focus-within .wo-cal-event-title {
    padding-right: 40px;
  }
  /* Event başlığının owner action ilə üst-üstə düşməməsi üçün right padding */
  .wo-cal-event:not([data-compact="1"]) .wo-cal-event-title {
    padding-right: 4px;
  }
  /* All-day event üçün də sağ padding */
  .wo-cal-allday-event { position: relative; padding-right: 8px; }
  .wo-cal-allday-event .wo-cal-allday-event-text {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: block;
  }

  /* All-day eventlər */
  .wo-cal-allday-event {
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--apple-text-primary);
    background: var(--wo-slate-bg);
    border-left: 3px solid var(--wo-slate-fg);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: transform .15s, box-shadow .15s;
  }
  .wo-cal-allday-event:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(11,46,51,.08); }
  .wo-cal-allday-event[data-tone="teal"]     { background: var(--wo-teal-bg);     border-left-color: var(--wo-teal-fg); }
  .wo-cal-allday-event[data-tone="amber"]    { background: var(--wo-amber-bg);    border-left-color: var(--wo-amber-fg); }
  .wo-cal-allday-event[data-tone="sky"]      { background: var(--wo-sky-bg);      border-left-color: var(--wo-sky-fg); }
  .wo-cal-allday-event[data-tone="lavender"] { background: var(--wo-lavender-bg); border-left-color: var(--wo-lavender-fg); }
  .wo-cal-allday-event[data-tone="coral"]    { background: var(--wo-coral-bg);    border-left-color: var(--wo-coral-fg); }
  .wo-cal-allday-event[data-tone="sand"]     { background: var(--wo-sand-bg);     border-left-color: var(--wo-sand-fg); }
  .wo-cal-allday-event[data-tone="slate"]    { background: var(--wo-slate-bg);    border-left-color: var(--wo-slate-fg); }
  .wo-cal-allday-event[data-tone="mint"]     { background: var(--wo-mint-bg);     border-left-color: var(--wo-mint-fg); }
  .wo-cal-allday-event[data-tone="emerald"]  { background: var(--wo-emerald-bg);  border-left-color: var(--wo-emerald-fg); }
  .wo-cal-allday-event[data-tone="indigo"]   { background: var(--wo-indigo-bg);   border-left-color: var(--wo-indigo-fg); }
  .wo-cal-allday-event[data-tone="stone"]    { background: var(--wo-stone-bg);    border-left-color: var(--wo-stone-fg); }

  /* Boş vəziyyət — heç bir task yoxdursa */
  .wo-cal-empty-state {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--apple-text-tertiary);
    font-size: 0.875rem;
    border-top: 1px solid var(--cal-border);
  }
  .wo-cal-empty-state strong {
    display: block;
    color: var(--apple-text-secondary);
    font-size: 0.9375rem;
    margin-bottom: 0.25rem;
  }

  /* Mobile: tablet/dar ekranlarda gün başlıqları daha sıx */
  @media (max-width: 900px) {
    .wo-cal {
      --cal-time-col: 44px;
      --cal-hour-h: 50px;
    }
    .wo-cal-day-head { padding: 0.55rem 0.3rem 0.5rem; }
    .wo-cal-day-head-date { font-size: 1rem; width: 26px; height: 26px; }
    .wo-cal-event { left: 2px; right: 2px; padding: 4px 6px; }
    .wo-cal-event-title { font-size: 0.6875rem; }
  }

  /* ===================== RIGHT: NEWS PANEL ===================== */
  .wo-news-header {
    padding: 1.25rem 3.75rem 1rem 1.5rem;
    border-bottom: 1px solid var(--wo-border);
    background: linear-gradient(180deg, rgba(184,227,233,0.2) 0%, transparent 100%);
  }
  .wo-news-eyebrow { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--apple-text-tertiary); font-weight: 700; }
  .wo-news-list { flex: 1 1 0; min-height: 0; overflow-y: auto; }
  .wo-news-list::-webkit-scrollbar { width: 6px; }
  .wo-news-list::-webkit-scrollbar-thumb { background: rgba(79, 124, 130, 0.22); border-radius: 3px; }

  .wo-news-item {
    padding: 0.9rem 1.5rem;
    border-bottom: 1px solid var(--wo-border);
    display: flex; gap: 0.7rem;
    transition: background .18s ease;
  }
  .wo-news-item:hover { background: rgba(184, 227, 233, 0.18); }
  .wo-news-dot {
    width: 7px; height: 7px; border-radius: 50%;
    flex-shrink: 0; margin-top: 0.45rem;
    background: var(--wo-accent);
    opacity: 0.5;
  }
  .wo-news-main { flex: 1; min-width: 0; }
  .wo-news-tags { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.3rem; flex-wrap: wrap; }
  .wo-news-tag { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.15rem 0.45rem; border-radius: 4px; }
  .wo-news-tag[data-type="incident"] { background: var(--wo-news-incident-bg); color: var(--wo-news-incident-fg); }
  .wo-news-tag[data-type="alert"]    { background: var(--wo-news-alert-bg);    color: var(--wo-news-alert-fg); }
  .wo-news-tag[data-type="training"] { background: var(--wo-news-training-bg); color: var(--wo-news-training-fg); }
  .wo-news-tag[data-type="bulletin"] { background: var(--wo-news-bulletin-bg); color: var(--wo-news-bulletin-fg); }
  .wo-news-pinned { font-size: 0.6875rem; color: var(--wo-amber-fg); font-weight: 600; }
  .wo-news-headline {
    font-size: 0.8125rem; font-weight: 500;
    color: var(--apple-text-primary); line-height: 1.4;
    letter-spacing: -0.01em; margin-bottom: 0.25rem;
  }
  .wo-news-date { font-size: 0.6875rem; color: var(--apple-text-tertiary); letter-spacing: 0.02em; }

  /* ===================== RIGHT: PERSON SUMMARY TABLE ===================== */
  .wo-date-input {
    font-family: inherit;
    font-size: 0.7rem;
    padding: 0.3rem 0.45rem;
    border-radius: 6px;
    border: 1px solid rgba(79, 124, 130, 0.2);
    background: rgba(255,255,255,0.9);
    color: var(--apple-text-primary);
    outline: none;
    transition: border-color 0.2s;
  }
  .wo-date-input:focus { border-color: var(--winter-medium); }

  .wo-person-card {
    border-bottom: 1px solid var(--wo-border);
    padding: 0;
    transition: background 0.18s;
  }
  .wo-person-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    cursor: pointer;
    user-select: none;
    gap: 0.5rem;
    transition: background 0.18s;
  }
  .wo-person-card-header:hover {
    background: rgba(184, 227, 233, 0.15);
  }
  .wo-person-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--winter-light);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.02em;
  }
  .wo-person-name {
    flex: 1; min-width: 0;
    font-size: 0.8125rem; font-weight: 600;
    color: var(--apple-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .wo-person-total {
    font-size: 0.75rem; font-weight: 700;
    color: var(--winter-medium);
    flex-shrink: 0;
    letter-spacing: 0.02em;
  }
  .wo-person-chevron {
    flex-shrink: 0; width: 16px; height: 16px;
    color: var(--apple-text-tertiary);
    transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
  }
  .wo-person-card.is-open .wo-person-chevron { transform: rotate(90deg); }
  .wo-person-detail {
    display: none;
    padding: 0 1rem 0.75rem;
  }
  .wo-person-card.is-open .wo-person-detail { display: block; }

  .wo-person-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7rem;
    line-height: 1.35;
  }
  .wo-person-table th {
    text-align: left;
    font-weight: 600;
    color: var(--apple-text-tertiary);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.4rem;
    border-bottom: 1px solid var(--wo-border);
    white-space: nowrap;
  }
  .wo-person-table td {
    padding: 0.3rem 0.4rem;
    color: var(--apple-text-primary);
    border-bottom: 1px solid rgba(79, 124, 130, 0.06);
    vertical-align: top;
  }
  .wo-person-table tr:last-child td { border-bottom: none; }
  .wo-person-table .wo-pt-day {
    font-weight: 600;
    color: var(--apple-text-secondary);
    white-space: nowrap;
  }
  .wo-person-table .wo-pt-cat {
    display: inline-block;
    font-size: 0.575rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    text-transform: uppercase;
  }
  .wo-person-summary-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--apple-text-tertiary);
  }
  .wo-person-summary-empty svg {
    width: 36px; height: 36px;
    margin-bottom: 0.75rem;
    opacity: 0.35;
  }
  .wo-person-cat-row { display: flex; gap: 0.3rem; flex-wrap: wrap; }

  /* ===================== PERSON SUMMARY BUTTON ===================== */
  .wo-person-summary-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 10px;
    border: 1px solid rgba(79, 124, 130, 0.2);
    background: linear-gradient(135deg, rgba(79, 124, 130, 0.08), rgba(79, 124, 130, 0.15));
    color: var(--winter-dark);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(.34,1.56,.64,1);
    white-space: nowrap;
  }
  .wo-person-summary-btn:hover {
    background: linear-gradient(135deg, var(--winter-medium), var(--winter-dark));
    color: #fff;
    border-color: var(--winter-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(11, 46, 51, 0.15);
  }
  .wo-person-summary-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

  /* ===================== PERSON OVERLAY (FULL PAGE) ===================== */
  .wo-person-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: linear-gradient(180deg, #F4FAFB 0%, #E8F4F5 50%, #F4FAFB 100%);
    display: none;
    overflow: hidden;
  }
  .wo-person-overlay[aria-hidden="false"] { display: flex; }
  .wo-person-overlay-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    animation: wo-fade-in .35s ease-out;
  }
  .wo-person-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(79, 124, 130, 0.12);
    box-shadow: 0 2px 12px rgba(11, 46, 51, 0.05);
    flex-shrink: 0;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .wo-person-overlay-title-area {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .wo-person-overlay-back {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(79, 124, 130, 0.15);
    background: rgba(255,255,255,0.9);
    color: var(--winter-dark);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
  }
  .wo-person-overlay-back:hover {
    background: var(--winter-medium);
    color: #fff;
    border-color: var(--winter-dark);
    transform: scale(1.05);
  }
  .wo-person-overlay-back svg { width: 18px; height: 18px; }
  .wo-person-overlay-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--winter-dark);
    letter-spacing: -0.03em;
    margin: 0;
  }
  .wo-person-overlay-controls {
    display: flex; align-items: center; gap: 0.75rem;
  }
  .wo-person-date-range {
    display: flex; align-items: center; gap: 0.4rem;
  }
  .wo-date-sep {
    color: var(--apple-text-tertiary); font-size: 0.75rem;
  }
  .wo-person-overlay-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    /* Əsas həftəlik icmal '.wo-body' ilə eyni padding — calendar grid eyni
       eni alsın */
    padding: 1.5rem 1.75rem 1.75rem;
  }
  .wo-person-overlay-body::-webkit-scrollbar { width: 8px; }
  .wo-person-overlay-body::-webkit-scrollbar-thumb { background: rgba(79, 124, 130, 0.2); border-radius: 4px; }

  /* ════════════════════════════════════════════════════════════════
     ŞƏXSLƏR ÜZRƏ YEKUN · v3 (Apple-style stats + LinkedIn-style list)
     ════════════════════════════════════════════════════════════════ */
  .wo-ps-page {
    max-width: 1100px;
    margin: 0 auto;
    animation: wo-fade-in .35s var(--wo-ease-smooth) both;
  }

  /* ────────────────────────────────────────────────────────────────
     v4: Sadə şəxs kart qrid + Statistika (İcmal) səhifəsi
     Apple-style: təmiz fon, yumşaq kölgə, hover-da hafif lift, smooth.
     ──────────────────────────────────────────────────────────────── */

  /* Şəxs kartları qrid */
  .wo-ps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    padding: 0.5rem 0 1.5rem;
  }
  .wo-ps-card {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(11, 46, 51, 0.06);
    border-radius: 18px;
    padding: 1.5rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.2s ease,
                background 0.2s ease;
    box-shadow: 0 1px 2px rgba(11, 46, 51, 0.03);
  }
  .wo-ps-card:hover {
    transform: translateY(-2px);
    box-shadow:
      0 1px 2px rgba(11, 46, 51, 0.04),
      0 8px 24px -6px rgba(11, 46, 51, 0.12);
    border-color: rgba(11, 46, 51, 0.1);
    background: #fff;
  }
  .wo-ps-card-avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-family: inherit;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  .wo-ps-card-avatar[data-tone="teal"]     { background: linear-gradient(140deg, #4A9BA3 0%, #2D6970 100%); }
  .wo-ps-card-avatar[data-tone="sky"]      { background: linear-gradient(140deg, #5A8EC2 0%, #2E5E80 100%); }
  .wo-ps-card-avatar[data-tone="lavender"] { background: linear-gradient(140deg, #7681B5 0%, #4B5788 100%); }
  .wo-ps-card-avatar[data-tone="mint"]     { background: linear-gradient(140deg, #549878 0%, #2F6B4A 100%); }
  .wo-ps-card-avatar[data-tone="indigo"]   { background: linear-gradient(140deg, #6366D1 0%, #3730A3 100%); }
  .wo-ps-card-avatar[data-tone="sand"]     { background: linear-gradient(140deg, #B59A6F 0%, #7C6332 100%); }
  .wo-ps-card-avatar[data-tone="coral"]    { background: linear-gradient(140deg, #C9706D 0%, #9E3D3D 100%); }
  .wo-ps-card-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--apple-text-primary);
    text-align: center;
    letter-spacing: -0.01em;
    line-height: 1.3;
    min-height: 1.3em;
  }
  .wo-ps-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.25rem;
  }
  .wo-ps-card-btn {
    appearance: none;
    border: 1px solid rgba(11, 46, 51, 0.1);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 11px;
    padding: 0.5rem 0.5rem;
    font-family: inherit;
    font-size: 0.78125rem;
    font-weight: 500;
    color: var(--apple-text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
  }
  .wo-ps-card-btn:hover {
    background: rgba(79, 124, 130, 0.08);
    border-color: rgba(79, 124, 130, 0.25);
  }
  .wo-ps-card-btn:active { transform: scale(0.97); }
  .wo-ps-card-btn svg { width: 14px; height: 14px; opacity: 0.75; }

  @media (max-width: 640px) {
    .wo-ps-grid {
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 0.75rem;
    }
    .wo-ps-card { padding: 1.1rem 0.85rem 1rem; gap: 0.75rem; }
    .wo-ps-card-avatar { width: 52px; height: 52px; font-size: 1.05rem; }
    .wo-ps-card-name { font-size: 0.875rem; }
    .wo-ps-card-btn { font-size: 0.75rem; padding: 0.4rem 0.3rem; }
    .wo-ps-card-btn span { display: none; }
    .wo-ps-card-btn svg { width: 16px; height: 16px; }
  }

  /* ────────────────────────────────────────────────────────────────
     STATS (İcmal) səhifəsi
     ──────────────────────────────────────────────────────────────── */
  .wo-stats-page {
    max-width: 920px;
    margin: 0 auto;
    padding: 0.25rem 0 1.5rem;
    animation: wo-fade-in .35s var(--wo-ease-smooth) both;
  }
  .wo-stats-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
  }
  /* Apple-style segmented control */
  .wo-stats-segment {
    display: inline-flex;
    background: rgba(11, 46, 51, 0.06);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
  }
  .wo-stats-seg-btn {
    appearance: none;
    border: none;
    background: transparent;
    border-radius: 8px;
    padding: 0.375rem 0.95rem;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--apple-text-secondary);
    cursor: pointer;
    transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
  }
  .wo-stats-seg-btn:hover { color: var(--apple-text-primary); }
  .wo-stats-seg-btn.is-active {
    background: #fff;
    color: var(--apple-text-primary);
    box-shadow: 0 1px 2px rgba(11, 46, 51, 0.06), 0 0 0 0.5px rgba(11, 46, 51, 0.04);
  }
  .wo-stats-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(11, 46, 51, 0.08);
    border-radius: 11px;
    padding: 3px 4px;
  }
  .wo-stats-nav-btn {
    appearance: none;
    border: none;
    background: transparent;
    width: 28px; height: 28px;
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--apple-text-secondary);
    transition: background 0.16s ease, color 0.16s ease;
  }
  .wo-stats-nav-btn:hover { background: rgba(79, 124, 130, 0.1); color: var(--apple-text-primary); }
  .wo-stats-nav-btn svg { width: 14px; height: 14px; }
  .wo-stats-range-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--apple-text-primary);
    padding: 0 0.5rem;
    min-width: 130px;
    text-align: center;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
  }

  /* Summary bar */
  .wo-stats-summary {
    display: flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(11, 46, 51, 0.06);
    border-radius: 16px;
    padding: 1rem 0.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 2px rgba(11, 46, 51, 0.03);
  }
  .wo-stats-summary-block {
    flex: 1;
    text-align: center;
    padding: 0 1rem;
  }
  .wo-stats-summary-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--apple-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
  }
  .wo-stats-summary-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--apple-text-primary);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }
  .wo-stats-summary-divider {
    width: 1px;
    background: rgba(11, 46, 51, 0.08);
    align-self: stretch;
    margin: 0.25rem 0;
  }

  /* Kateqoriya kartları (accordion) */
  .wo-stats-cats {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }
  .wo-stats-cat {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(11, 46, 51, 0.06);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(11, 46, 51, 0.03);
    transition: box-shadow 0.22s ease;
  }
  .wo-stats-cat:hover {
    box-shadow: 0 1px 2px rgba(11, 46, 51, 0.04), 0 6px 16px -6px rgba(11, 46, 51, 0.06);
  }
  .wo-stats-cat-head {
    /* Button reset + layout */
    appearance: none;
    font-family: inherit;
    width: 100%;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.125rem;
    border: none;
    border-bottom: 1px solid rgba(11, 46, 51, 0.05);
    transition: filter 0.18s ease;
  }
  .wo-stats-cat-head:hover { filter: brightness(0.98); }
  /* Hər kateqoriya rəngində yumşaq fon — task event-ləri ilə eyni paleta */
  .wo-stats-cat[data-tone="teal"]     > .wo-stats-cat-head { background: var(--wo-teal-bg); }
  .wo-stats-cat[data-tone="amber"]    > .wo-stats-cat-head { background: var(--wo-amber-bg); }
  .wo-stats-cat[data-tone="sky"]      > .wo-stats-cat-head { background: var(--wo-sky-bg); }
  .wo-stats-cat[data-tone="lavender"] > .wo-stats-cat-head { background: var(--wo-lavender-bg); }
  .wo-stats-cat[data-tone="coral"]    > .wo-stats-cat-head { background: var(--wo-coral-bg); }
  .wo-stats-cat[data-tone="sand"]     > .wo-stats-cat-head { background: var(--wo-sand-bg); }
  .wo-stats-cat[data-tone="slate"]    > .wo-stats-cat-head { background: var(--wo-slate-bg); }
  .wo-stats-cat[data-tone="mint"]     > .wo-stats-cat-head { background: var(--wo-mint-bg); }
  .wo-stats-cat[data-tone="emerald"]  > .wo-stats-cat-head { background: var(--wo-emerald-bg); }
  .wo-stats-cat[data-tone="indigo"]   > .wo-stats-cat-head { background: var(--wo-indigo-bg); }
  .wo-stats-cat[data-tone="stone"]    > .wo-stats-cat-head { background: var(--wo-stone-bg); }

  .wo-stats-cat-dot {
    width: 10px; height: 10px; border-radius: 50%;
    flex-shrink: 0;
  }
  .wo-stats-cat[data-tone="teal"]     .wo-stats-cat-dot { background: var(--wo-teal-fg); }
  .wo-stats-cat[data-tone="amber"]    .wo-stats-cat-dot { background: var(--wo-amber-fg); }
  .wo-stats-cat[data-tone="sky"]      .wo-stats-cat-dot { background: var(--wo-sky-fg); }
  .wo-stats-cat[data-tone="lavender"] .wo-stats-cat-dot { background: var(--wo-lavender-fg); }
  .wo-stats-cat[data-tone="coral"]    .wo-stats-cat-dot { background: var(--wo-coral-fg); }
  .wo-stats-cat[data-tone="sand"]     .wo-stats-cat-dot { background: var(--wo-sand-fg); }
  .wo-stats-cat[data-tone="slate"]    .wo-stats-cat-dot { background: var(--wo-slate-fg); }
  .wo-stats-cat[data-tone="mint"]     .wo-stats-cat-dot { background: var(--wo-mint-fg); }
  .wo-stats-cat[data-tone="emerald"]  .wo-stats-cat-dot { background: var(--wo-emerald-fg); }
  .wo-stats-cat[data-tone="indigo"]   .wo-stats-cat-dot { background: var(--wo-indigo-fg); }
  .wo-stats-cat[data-tone="stone"]    .wo-stats-cat-dot { background: var(--wo-stone-fg); }

  /* Başlıq mətnini öz kateqoriya tonunun tünd rənginə uyğunlaşdır */
  .wo-stats-cat[data-tone="teal"]     .wo-stats-cat-name { color: var(--wo-teal-fg); }
  .wo-stats-cat[data-tone="amber"]    .wo-stats-cat-name { color: var(--wo-amber-fg); }
  .wo-stats-cat[data-tone="sky"]      .wo-stats-cat-name { color: var(--wo-sky-fg); }
  .wo-stats-cat[data-tone="lavender"] .wo-stats-cat-name { color: var(--wo-lavender-fg); }
  .wo-stats-cat[data-tone="coral"]    .wo-stats-cat-name { color: var(--wo-coral-fg); }
  .wo-stats-cat[data-tone="sand"]     .wo-stats-cat-name { color: var(--wo-sand-fg); }
  .wo-stats-cat[data-tone="slate"]    .wo-stats-cat-name { color: var(--wo-slate-fg); }
  .wo-stats-cat[data-tone="mint"]     .wo-stats-cat-name { color: var(--wo-mint-fg); }
  .wo-stats-cat[data-tone="emerald"]  .wo-stats-cat-name { color: var(--wo-emerald-fg); }
  .wo-stats-cat[data-tone="indigo"]   .wo-stats-cat-name { color: var(--wo-indigo-fg); }
  .wo-stats-cat[data-tone="stone"]    .wo-stats-cat-name { color: var(--wo-stone-fg); }

  .wo-stats-cat-title { flex: 1; min-width: 0; }
  .wo-stats-cat-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--apple-text-primary);
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  .wo-stats-cat-sub {
    font-size: 0.75rem;
    color: var(--apple-text-tertiary);
    margin-top: 0.1rem;
    opacity: 0.85;
  }
  .wo-stats-cat-time {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--apple-text-primary);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  /* Akkordon chevron (kiçik ox) — başlığın sağında, açıq olduqda aşağı,
     bağlandıqda sağa baxır */
  .wo-stats-cat-chev {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    color: var(--apple-text-secondary);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), background 0.18s ease;
    flex-shrink: 0;
  }
  .wo-stats-cat-chev svg { width: 14px; height: 14px; }
  .wo-stats-cat-head:hover .wo-stats-cat-chev { background: rgba(255, 255, 255, 0.85); }
  /* Bağlandıqda chevron 90° dönür və border-bottom yox olur */
  .wo-stats-cat[data-collapsed="1"] > .wo-stats-cat-head { border-bottom-color: transparent; }
  .wo-stats-cat[data-collapsed="1"] .wo-stats-cat-chev { transform: rotate(-90deg); }
  .wo-stats-cat[data-collapsed="1"] .wo-stats-cat-tasks { display: none; }

  .wo-stats-cat-tasks {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.78);
  }
  .wo-stats-task {
    appearance: none;
    background: transparent;
    border: none;
    border-top: 1px solid rgba(11, 46, 51, 0.04);
    display: grid;
    grid-template-columns: 110px 90px 1fr;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1.125rem;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: var(--apple-text-primary);
    transition: background 0.16s ease;
  }
  .wo-stats-task:first-child { border-top: none; }
  .wo-stats-task:hover { background: rgba(79, 124, 130, 0.04); }
  .wo-stats-task-when { min-width: 0; }
  .wo-stats-task-day {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--apple-text-primary);
    letter-spacing: -0.01em;
    text-transform: capitalize;
  }
  .wo-stats-task-date {
    font-size: 0.6875rem;
    color: var(--apple-text-tertiary);
    margin-top: 0.1rem;
    font-variant-numeric: tabular-nums;
  }
  .wo-stats-task-time {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--apple-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .wo-stats-task-body { min-width: 0; }
  .wo-stats-task-title {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--apple-text-primary);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .wo-stats-task-unit {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    color: var(--apple-text-tertiary);
    background: rgba(11, 46, 51, 0.05);
    padding: 0.1rem 0.45rem;
    border-radius: 5px;
    font-weight: 500;
  }

  .wo-stats-empty {
    background: rgba(255, 255, 255, 0.6);
    border: 1px dashed rgba(11, 46, 51, 0.12);
    border-radius: 16px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    color: var(--apple-text-secondary);
  }
  .wo-stats-empty svg { width: 40px; height: 40px; opacity: 0.4; }
  .wo-stats-empty strong { font-size: 0.9375rem; font-weight: 600; color: var(--apple-text-primary); }
  .wo-stats-empty small { font-size: 0.8125rem; color: var(--apple-text-tertiary); }

  @media (max-width: 640px) {
    .wo-stats-toolbar { gap: 0.5rem; }
    .wo-stats-summary { padding: 0.85rem 0.25rem; }
    .wo-stats-summary-block { padding: 0 0.5rem; }
    .wo-stats-summary-value { font-size: 1.2rem; }
    .wo-stats-task {
      grid-template-columns: 80px 1fr;
      grid-template-areas: "when title" "when time";
      gap: 0.5rem;
      padding: 0.7rem 0.85rem;
    }
    .wo-stats-task-when { grid-area: when; }
    .wo-stats-task-body { grid-area: title; }
    .wo-stats-task-time { grid-area: time; padding-left: 0; font-size: 0.6875rem; }
  }

  /* Statistika kartları */
  .wo-ps-stats {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 0.875rem;
    margin-bottom: 1.5rem;
  }
  .wo-ps-stat-card {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.1rem 1.25rem;
    background: var(--apple-bg-secondary);
    border-radius: 16px;
    border: 1px solid var(--wo-border);
    box-shadow: 0 1px 3px rgba(11, 46, 51, 0.04);
    transition: transform .25s var(--wo-ease-spring), box-shadow .25s;
  }
  .wo-ps-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(11, 46, 51, 0.08);
  }
  .wo-ps-stat-primary {
    background: linear-gradient(135deg, var(--winter-medium) 0%, var(--winter-dark) 100%);
    border-color: transparent;
    color: #fff;
  }
  .wo-ps-stat-primary .wo-ps-stat-label,
  .wo-ps-stat-primary .wo-ps-stat-sub { color: rgba(255,255,255,0.78); }
  .wo-ps-stat-primary .wo-ps-stat-value { color: #fff; }
  .wo-ps-stat-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(79, 124, 130, 0.10);
    color: var(--winter-dark);
    flex-shrink: 0;
  }
  .wo-ps-stat-primary .wo-ps-stat-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
  }
  .wo-ps-stat-icon svg { width: 22px; height: 22px; }
  .wo-ps-stat-meta { min-width: 0; flex: 1; }
  .wo-ps-stat-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--apple-text-tertiary);
    margin-bottom: 0.25rem;
  }
  .wo-ps-stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--apple-text-primary);
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
  }
  .wo-ps-stat-sub {
    font-size: 0.75rem;
    color: var(--apple-text-tertiary);
    margin-top: 0.2rem;
  }

  /* Kateqoriya çipləri (filtr) */
  .wo-ps-cats {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
  }
  .wo-ps-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: var(--apple-bg-secondary);
    border: 1px solid var(--wo-border);
    color: var(--apple-text-secondary);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background .18s, border-color .18s, transform .2s var(--wo-ease-spring), box-shadow .18s;
  }
  .wo-ps-cat-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(11, 46, 51, 0.06);
    border-color: rgba(79, 124, 130, 0.3);
  }
  .wo-ps-cat-chip.is-active {
    background: var(--winter-dark);
    border-color: var(--winter-dark);
    color: #fff;
  }
  .wo-ps-cat-chip.is-active .wo-ps-cat-num { color: rgba(255,255,255,0.85); }
  .wo-ps-cat-chip.is-active .wo-ps-cat-dot { background: #fff !important; }
  .wo-ps-cat-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .wo-ps-cat-chip[data-tone="teal"]     .wo-ps-cat-dot { background: var(--wo-teal-fg); }
  .wo-ps-cat-chip[data-tone="amber"]    .wo-ps-cat-dot { background: var(--wo-amber-fg); }
  .wo-ps-cat-chip[data-tone="sky"]      .wo-ps-cat-dot { background: var(--wo-sky-fg); }
  .wo-ps-cat-chip[data-tone="lavender"] .wo-ps-cat-dot { background: var(--wo-lavender-fg); }
  .wo-ps-cat-chip[data-tone="coral"]    .wo-ps-cat-dot { background: var(--wo-coral-fg); }
  .wo-ps-cat-chip[data-tone="sand"]     .wo-ps-cat-dot { background: var(--wo-sand-fg); }
  .wo-ps-cat-chip[data-tone="slate"]    .wo-ps-cat-dot { background: var(--wo-slate-fg); }
  .wo-ps-cat-chip[data-tone="mint"]     .wo-ps-cat-dot { background: var(--wo-mint-fg); }
  .wo-ps-cat-chip[data-tone="emerald"]  .wo-ps-cat-dot { background: var(--wo-emerald-fg); }
  .wo-ps-cat-chip[data-tone="indigo"]   .wo-ps-cat-dot { background: var(--wo-indigo-fg); }
  .wo-ps-cat-chip[data-tone="stone"]    .wo-ps-cat-dot { background: var(--wo-stone-fg); }
  .wo-ps-cat-name {
    color: inherit;
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  .wo-ps-cat-num {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--apple-text-tertiary);
    font-variant-numeric: tabular-nums;
  }

  /* Siyahı başlığı */
  .wo-ps-list-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0 0.25rem 0.75rem;
  }
  .wo-ps-list-header h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--apple-text-primary);
    margin: 0;
  }
  .wo-ps-list-count {
    font-size: 0.75rem;
    color: var(--apple-text-tertiary);
    font-weight: 500;
  }

  /* Şəxslər siyahısı (LinkedIn-style sətirlər) */
  .wo-ps-list {
    display: flex;
    flex-direction: column;
    background: var(--apple-bg-secondary);
    border-radius: 14px;
    border: 1px solid var(--wo-border);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(11, 46, 51, 0.04);
  }
  .wo-ps-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.85rem 1rem;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    border-bottom: 1px solid rgba(79, 124, 130, 0.08);
    transition: background .15s;
  }
  .wo-ps-row:last-child { border-bottom: none; }
  .wo-ps-row:hover { background: rgba(79, 124, 130, 0.04); }
  .wo-ps-row:active { background: rgba(79, 124, 130, 0.07); }

  .wo-ps-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 0.8125rem;
    color: #fff;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    background: var(--wo-slate-fg);
    user-select: none;
  }
  .wo-ps-avatar[data-tone="teal"]     { background: var(--wo-teal-fg); }
  .wo-ps-avatar[data-tone="amber"]    { background: var(--wo-amber-fg); }
  .wo-ps-avatar[data-tone="sky"]      { background: var(--wo-sky-fg); }
  .wo-ps-avatar[data-tone="lavender"] { background: var(--wo-lavender-fg); }
  .wo-ps-avatar[data-tone="coral"]    { background: var(--wo-coral-fg); }
  .wo-ps-avatar[data-tone="sand"]     { background: var(--wo-sand-fg); }
  .wo-ps-avatar[data-tone="slate"]    { background: var(--wo-slate-fg); }
  .wo-ps-avatar[data-tone="mint"]     { background: var(--wo-mint-fg); }
  .wo-ps-avatar[data-tone="indigo"]   { background: var(--wo-indigo-fg); }

  .wo-ps-row-main {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    gap: 0.25rem;
  }
  .wo-ps-row-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--apple-text-primary);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wo-ps-row-cats {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
  .wo-ps-row-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--wo-slate-fg);
  }
  .wo-ps-row-dot[data-tone="teal"]     { background: var(--wo-teal-fg); }
  .wo-ps-row-dot[data-tone="amber"]    { background: var(--wo-amber-fg); }
  .wo-ps-row-dot[data-tone="sky"]      { background: var(--wo-sky-fg); }
  .wo-ps-row-dot[data-tone="lavender"] { background: var(--wo-lavender-fg); }
  .wo-ps-row-dot[data-tone="coral"]    { background: var(--wo-coral-fg); }
  .wo-ps-row-dot[data-tone="sand"]     { background: var(--wo-sand-fg); }
  .wo-ps-row-dot[data-tone="slate"]    { background: var(--wo-slate-fg); }
  .wo-ps-row-dot[data-tone="mint"]     { background: var(--wo-mint-fg); }
  .wo-ps-row-dot[data-tone="emerald"]  { background: var(--wo-emerald-fg); }
  .wo-ps-row-dot[data-tone="indigo"]   { background: var(--wo-indigo-fg); }
  .wo-ps-row-dot[data-tone="stone"]    { background: var(--wo-stone-fg); }

  .wo-ps-row-stats {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-shrink: 0;
  }
  .wo-ps-row-jobs,
  .wo-ps-row-time {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--apple-text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    text-align: right;
    min-width: 64px;
  }
  .wo-ps-row-jobs span {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--apple-text-tertiary);
    margin-left: 0.15rem;
  }
  .wo-ps-row-time {
    color: var(--winter-medium);
    min-width: 90px;
  }
  .wo-ps-row-chev {
    color: var(--apple-text-tertiary);
    opacity: 0.6;
    transition: transform .2s var(--wo-ease-spring);
    flex-shrink: 0;
  }
  .wo-ps-row-chev svg { width: 16px; height: 16px; }
  .wo-ps-row:hover .wo-ps-row-chev {
    opacity: 1;
    transform: translateX(3px);
    color: var(--winter-dark);
  }

  /* Boş vəziyyətlər */
  .wo-ps-empty {
    padding: 4rem 2rem;
    text-align: center;
    color: var(--apple-text-tertiary);
    display: flex; flex-direction: column;
    align-items: center; gap: 0.5rem;
  }
  .wo-ps-empty svg { width: 48px; height: 48px; opacity: 0.4; }
  .wo-ps-empty strong {
    font-size: 1rem;
    font-weight: 600;
    color: var(--apple-text-secondary);
    margin-top: 0.25rem;
  }
  .wo-ps-empty small {
    font-size: 0.8125rem;
    color: var(--apple-text-tertiary);
    max-width: 380px;
    line-height: 1.5;
  }
  .wo-ps-empty-inline {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--apple-text-tertiary);
    font-size: 0.875rem;
    font-style: italic;
  }

  /* ──────── Şəxs təqvim görünüşü ──────── */
  .wo-pc-page {
    /* max-width yoxdur — əsas həftəlik icmaldakı təqvim ilə eyni eni alır */
    width: 100%;
    animation: wo-fade-in .35s var(--wo-ease-smooth) both;
  }
  .wo-pc-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--apple-bg-secondary);
    border-radius: 14px;
    border: 1px solid var(--wo-border);
    box-shadow: 0 1px 3px rgba(11, 46, 51, 0.04);
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
  }
  .wo-pc-id {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex: 1;
    min-width: 240px;
  }
  .wo-pc-avatar {
    width: 48px; height: 48px;
    font-size: 1rem;
  }
  .wo-pc-id-text { min-width: 0; }
  .wo-pc-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--apple-text-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
  }
  .wo-pc-eyebrow {
    font-size: 0.75rem;
    color: var(--apple-text-tertiary);
    margin-top: 0.2rem;
    letter-spacing: 0.01em;
  }
  .wo-pc-stats {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.75rem;
  }
  .wo-pc-stat { text-align: center; min-width: 80px; }
  .wo-pc-stat-num {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--apple-text-primary);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
  }
  .wo-pc-stat-lbl {
    font-size: 0.6875rem;
    color: var(--apple-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-top: 0.25rem;
  }
  .wo-pc-stat-divider {
    width: 1px;
    height: 28px;
    background: rgba(79, 124, 130, 0.18);
  }
  .wo-pc-week-nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(79, 124, 130, 0.06);
    border-radius: 999px;
    padding: 0.3rem;
  }
  .wo-pc-week-nav .wo-week-btn {
    background: transparent;
    border: none;
  }
  .wo-pc-week-nav .wo-week-btn:hover {
    background: rgba(79, 124, 130, 0.10);
  }

  @media (max-width: 760px) {
    .wo-ps-stats { grid-template-columns: 1fr; }
    .wo-ps-row-stats { gap: 0.75rem; }
    .wo-ps-row-jobs, .wo-ps-row-time { min-width: 0; }
    .wo-pc-header { gap: 0.75rem; padding: 0.85rem 1rem; }
    .wo-pc-stats { padding: 0; }
    .wo-pc-week-nav { width: 100%; justify-content: center; }
  }

  /* ════════════════════════════════════════════════════════════════
     ŞƏXS TƏQVİMİ — FULL-BLEED (qutu yox, səhifə kimi)
     Body öz scroll-unu istifadə edir; gün başlıqları sticky qalır,
     08:00 və 20:00 etiketləri kəsilmir.
     ════════════════════════════════════════════════════════════════ */
  /* Body padding-ini azaltırıq ki, calendar daha çox eni alsın və
     "qutu kənarı" effekti yox olsun. Üstdə yalnız header və week-nav
     üçün lazım olan minimum boşluq saxlanır. */
  .wo-person-overlay-body {
    padding: 0.75rem 1rem 1.25rem;
  }
  /* Şəxs təqvimi səhifəsi — overlay-in tam enini tutsun */
  .wo-person-overlay-body .wo-pc-page {
    max-width: none;
  }
  /* Şəxs identifikasiya header-i (avatar + ad + stats + həftə nav)
     scroll edərkən yuxarıda qalsın */
  .wo-person-overlay-body .wo-pc-header {
    position: sticky;
    top: 0;
    z-index: 20;
    margin-bottom: 0.75rem;
    border-radius: 12px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    background: rgba(255, 255, 255, 0.88);
  }
  /* Calendar-ı "kart" görünüşündən çıxarırıq — qutu yox, axın */
  .wo-person-overlay-body .wo-cal {
    border-radius: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    overflow: visible;
  }
  /* Gün başlıqları scroll edərkən yuxarıda qalsın — person header-in altında */
  .wo-person-overlay-body .wo-cal-header {
    /* wo-pc-header sticky olduğu üçün onun altında dayanırıq.
       wo-pc-header hündürlüyü təqribən 76px (padding 1rem + content ~44px). */
    top: 76px;
    background: rgba(244, 250, 251, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cal-border);
  }
  /* 08:00 və 20:00 etiketlərinin kəsilməməsi üçün calendar gövdəsinə
     kiçik üst/alt padding əlavə edirik */
  .wo-person-overlay-body .wo-cal-body {
    padding-top: 6px;
    padding-bottom: 8px;
  }
  /* Mobil — sticky offset-i mobil header üçün uyğunlaşdır */
  @media (max-width: 760px) {
    .wo-person-overlay-body { padding: 0.5rem 0.6rem 1rem; }
    .wo-person-overlay-body .wo-cal-header { top: 110px; }
  }

  /* ════════════════════════════════════════════════════════════════ */

  /* Person grid for overlay */
  .wo-person-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1.25rem;
  }
  .wo-person-card-v2 {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(79, 124, 130, 0.1);
    box-shadow: 0 2px 8px rgba(11, 46, 51, 0.04);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(.34,1.56,.64,1);
  }
  .wo-person-card-v2:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(11, 46, 51, 0.1);
    border-color: rgba(79, 124, 130, 0.2);
  }
  .wo-person-card-v2-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(79, 124, 130, 0.06);
    background: linear-gradient(180deg, rgba(184,227,233,0.08), transparent);
  }
  .wo-person-avatar-lg {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--winter-medium), var(--winter-dark));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(11, 46, 51, 0.15);
  }
  .wo-person-card-v2-info { flex: 1; min-width: 0; }
  .wo-person-card-v2-name {
    font-size: 0.9375rem; font-weight: 700;
    color: var(--apple-text-primary);
    letter-spacing: -0.01em;
  }
  .wo-person-card-v2-badges {
    display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.3rem;
  }
  .wo-person-card-v2-total {
    font-size: 1.25rem; font-weight: 800;
    color: var(--winter-medium);
    flex-shrink: 0;
    letter-spacing: -0.02em;
  }
  .wo-person-card-v2-total small {
    font-size: 0.7rem; font-weight: 500; color: var(--apple-text-tertiary);
  }
  .wo-person-card-v2-body { padding: 0.75rem 1.25rem 1rem; }

  @media (max-width: 640px) {
    .wo-person-overlay-header { padding: 0.75rem 1rem; }
    .wo-person-overlay-body { padding: 0.5rem 0.6rem 1rem; }
    .wo-person-overlay-title { font-size: 1.15rem; }
    .wo-person-grid { grid-template-columns: 1fr; }
  }
  /* ═══════════════════════════════════════════════════════════
     JOB DETAIL OVERLAY — Elevated Apple-Style
     Hero header (dark gradient) + field cards body
     ═══════════════════════════════════════════════════════════ */

  @keyframes wo-overlay-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes wo-overlay-scale-in {
    0%   { opacity: 0; transform: translate(-50%, -48%) scale(0.97); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
  @keyframes wo-card-rise {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .wo-drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(11, 46, 51, 0.52);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: none;
    opacity: 0;
    transition: opacity .28s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .wo-drawer-backdrop.is-open {
    display: block;
    animation: wo-overlay-fade-in .28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  .wo-drawer {
    position: fixed;
    top: 50%; left: 50%;
    width: min(640px, calc(100vw - 2rem));
    max-height: min(90vh, 820px);
    background: #F7FAFB;
    z-index: 10001;
    transform: translate(-50%, -50%) scale(0.97);
    opacity: 0;
    pointer-events: none;
    display: flex; flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    box-shadow:
      0 0 0 1px rgba(11, 46, 51, 0.08),
      0 12px 32px -8px rgba(11, 46, 51, 0.2),
      0 32px 64px -16px rgba(11, 46, 51, 0.32);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  .wo-drawer.is-open {
    pointer-events: auto;
    animation: wo-overlay-scale-in .38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  /* ───── HERO HEADER (dark gradient, like reference) ───── */
  .wo-drawer-hero {
    position: relative;
    padding: 1.4rem 1.6rem 1.6rem;
    background:
      radial-gradient(140% 120% at 0% 0%, rgba(79, 124, 130, 0.55) 0%, transparent 55%),
      radial-gradient(120% 100% at 100% 100%, rgba(11, 46, 51, 0.4) 0%, transparent 60%),
      linear-gradient(135deg, #1a4449 0%, #0B2E33 100%);
    color: #fff;
    overflow: hidden;
    flex-shrink: 0;
  }
  /* Subtle shine on top edge */
  .wo-drawer-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
    pointer-events: none;
  }
  /* Soft vignette highlight */
  .wo-drawer-hero::after {
    content: '';
    position: absolute;
    top: -40%; right: -20%;
    width: 60%; height: 140%;
    background: radial-gradient(ellipse, rgba(184, 227, 233, 0.08) 0%, transparent 60%);
    pointer-events: none;
  }
  .wo-drawer-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
    position: relative;
    z-index: 1;
  }
  .wo-drawer-hero-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.75rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
  }
  .wo-drawer-close {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
    flex-shrink: 0;
  }
  .wo-drawer-close:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
  }
  .wo-drawer-close:active { transform: scale(0.97); }
  .wo-drawer-close svg { width: 14px; height: 14px; stroke-width: 2.2; }

  .wo-drawer-title {
    position: relative;
    z-index: 1;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.35;
    margin: 0;
    padding-right: 1rem;
  }

  /* ───── BODY (scrollable, field cards) ───── */
  .wo-drawer-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 1.2rem 1.2rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background: #F7FAFB;
  }
  .wo-drawer-scroll::-webkit-scrollbar { width: 6px; }
  .wo-drawer-scroll::-webkit-scrollbar-track { background: transparent; }
  .wo-drawer-scroll::-webkit-scrollbar-thumb {
    background: rgba(79, 124, 130, 0.22);
    border-radius: 3px;
  }
  .wo-drawer-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(79, 124, 130, 0.35);
  }

  /* Field card — holds one or multiple related fields */
  .wo-drawer-card {
    background: #FFFFFF;
    border: 1px solid rgba(11, 46, 51, 0.08);
    border-radius: 16px;
    padding: 1rem 1.1rem 1.1rem;
    opacity: 0;
    animation: wo-card-rise .32s ease-out forwards;
    transition: border-color .2s ease;
  }
  .wo-drawer-card:hover {
    border-color: rgba(11, 46, 51, 0.14);
  }
  /* Staggered entrance */
  .wo-drawer-card:nth-child(1) { animation-delay: .05s; }
  .wo-drawer-card:nth-child(2) { animation-delay: .10s; }
  .wo-drawer-card:nth-child(3) { animation-delay: .15s; }
  .wo-drawer-card:nth-child(4) { animation-delay: .20s; }
  .wo-drawer-card:nth-child(5) { animation-delay: .25s; }
  .wo-drawer-card:nth-child(6) { animation-delay: .30s; }

  .wo-drawer-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: rgba(79, 124, 130, 0.08);
    color: var(--winter-medium);
    margin-bottom: 0.55rem;
  }
  .wo-drawer-card-icon svg {
    width: 15px; height: 15px;
    stroke-width: 2;
  }

  /* Row holding field groups (supports 1-3 columns) */
  .wo-drawer-card-row {
    display: grid;
    gap: 0.85rem;
  }
  .wo-drawer-card-row[data-cols="1"] { grid-template-columns: 1fr; }
  .wo-drawer-card-row[data-cols="2"] { grid-template-columns: 1fr 1fr; }
  .wo-drawer-card-row[data-cols="3"] { grid-template-columns: 1fr 1fr 1fr; }

  .wo-drawer-field {
    display: flex; flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
  }
  .wo-drawer-field-label {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--apple-text-tertiary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  /* Input-like readonly value display */
  .wo-drawer-field-value {
    padding: 0.65rem 0.85rem;
    background: #F4FAFB;
    border: 1px solid rgba(11, 46, 51, 0.08);
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--apple-text-primary);
    letter-spacing: -0.005em;
    line-height: 1.45;
    word-break: break-word;
    min-height: 40px;
    display: flex; align-items: center;
  }
  .wo-drawer-field-value.is-empty {
    color: var(--apple-text-tertiary);
    font-weight: 500;
    font-style: normal;
  }
  /* Status pill — special styling for category values */
  .wo-drawer-field-value.is-ref {
    color: var(--winter-dark);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  /* Note card — slightly distinct style */
  .wo-drawer-card.is-note {
    background: #FFFFFF;
  }
  .wo-drawer-card.is-note .wo-drawer-field-value {
    background: #F4FAFB;
    min-height: 60px;
    align-items: flex-start;
    padding-top: 0.7rem;
    line-height: 1.55;
    white-space: pre-wrap;
  }

  /* ───── Responsive ───── */
  @media (max-width: 640px) {
    .wo-drawer {
      width: calc(100vw - 1rem);
      max-height: 92vh;
      border-radius: 20px;
    }
    .wo-drawer-hero { padding: 1.15rem 1.2rem 1.35rem; }
    .wo-drawer-title { font-size: 1.15rem; }
    .wo-drawer-scroll { padding: 1rem 1rem 1.2rem; gap: 0.7rem; }
    .wo-drawer-card { padding: 0.9rem 1rem 1rem; border-radius: 14px; }
    /* Collapse multi-column layouts on narrow screens */
    .wo-drawer-card-row[data-cols="2"],
    .wo-drawer-card-row[data-cols="3"] {
      grid-template-columns: 1fr;
    }
  }

  .wo-state { padding: 2.5rem 1rem; text-align: center; color: var(--apple-text-tertiary); font-size: 0.875rem; }
  .wo-skel-row { height: 56px; border-radius: 12px; margin-bottom: 0.55rem; background: linear-gradient(90deg, rgba(79,124,130,0.05) 0%, rgba(79,124,130,0.13) 50%, rgba(79,124,130,0.05) 100%); background-size: 200% 100%; animation: wo-shimmer 1.6s ease-in-out infinite; }
  @keyframes wo-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
  .wo-error { margin: 1rem 1.75rem; padding: 0.85rem 1rem; border-radius: 12px; background: rgba(220, 53, 69, 0.08); border: 1px solid rgba(220, 53, 69, 0.22); color: #9B2C2C; font-size: 0.8125rem; line-height: 1.5; }

  /* ===================== RESPONSIVE ===================== */
  @media (max-width: 640px) {
    .weekly-modal-overlay { padding: 0; }
    .wo-filters, .wo-body { padding-left: 1rem; padding-right: 1rem; }
    /* Mobil header — solda 1rem, sağda × düyməsi üçün ~60px boşluq */
    .wo-header { padding-left: 1rem; padding-right: 3.5rem; }
    .wo-day-counts { gap: 0.25rem; }
    .wo-person-summary-btn span { display: none; }
    .wo-person-summary-btn { padding: 0.4rem; border-radius: 8px; }
    /* Mobil × düyməsi bir az kiçildilir */
    .weekly-modal-close { top: 14px; right: 12px; width: 32px; height: 32px; }
  }


/* ==================== 3. blok (orijinal sətir 17007) ==================== */
/* ════════════════════════════════════════════════════════════
       COMPLETION STATS — Seqment Səhifəsi (Apple-style tam ekran)
       ════════════════════════════════════════════════════════════ */
    .cs-seg-page {
      position: fixed;
      inset: 0;
      z-index: 9990;
      background:
        radial-gradient(1200px 600px at 18% -8%, rgba(79,124,130,0.10), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(184,227,233,0.18), transparent 55%),
        var(--apple-bg-primary);
      overflow-y: auto;
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition:
        opacity 0.4s var(--cs-ease-apple),
        transform 0.5s var(--cs-ease-apple),
        visibility 0.4s var(--cs-ease-apple);
    }
    .cs-seg-page.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .cs-seg-page-inner {
      max-width: 1080px;
      margin: 0 auto;
      padding: clamp(1rem, 3vw, 2.25rem) clamp(1rem, 4vw, 2.5rem) 4rem;
    }

    /* ── Geri düyməsi ── */
    .cs-seg-back {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.55rem 1rem 0.55rem 0.75rem;
      border: 1px solid rgba(79,124,130,0.18);
      border-radius: 100px;
      background: rgba(255,255,255,0.72);
      backdrop-filter: blur(16px) saturate(160%);
      -webkit-backdrop-filter: blur(16px) saturate(160%);
      color: var(--apple-text-secondary);
      font-family: inherit;
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      cursor: pointer;
      margin-bottom: 1.5rem;
      box-shadow: 0 2px 10px rgba(11,46,51,0.05);
      transition: transform 0.25s var(--cs-ease-apple), background 0.25s var(--cs-ease-apple), box-shadow 0.25s var(--cs-ease-apple), border-color 0.25s var(--cs-ease-apple);
      animation: csSegFade 0.5s var(--cs-ease-apple) 0.05s backwards;
    }
    .cs-seg-back:hover {
      background: #fff;
      border-color: rgba(79,124,130,0.32);
      transform: translateX(-2px);
      box-shadow: 0 6px 16px rgba(11,46,51,0.09);
    }
    .cs-seg-back:active { transform: translateX(-2px) scale(0.97); }
    .cs-seg-back svg { width: 17px; height: 17px; }

    /* ── HERO ── */
    .cs-seg-hero {
      position: relative;
      overflow: hidden;
      border-radius: 26px;
      padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3.5vw, 2.5rem);
      color: #fff;
      background: linear-gradient(135deg, var(--seg-from, #4F7C82) 0%, var(--seg-to, #0B2E33) 100%);
      box-shadow: 0 24px 60px rgba(11,46,51,0.22);
      margin-bottom: 1.75rem;
      animation: csSegHero 0.6s var(--cs-ease-apple) 0.08s backwards;
    }
    .cs-seg-hero::after {
      content: "";
      position: absolute;
      top: -40%;
      right: -10%;
      width: 60%;
      height: 180%;
      background: radial-gradient(closest-side, rgba(255,255,255,0.22), transparent 70%);
      pointer-events: none;
    }
    .cs-seg-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(420px 220px at 88% 120%, rgba(255,255,255,0.10), transparent 60%);
      pointer-events: none;
    }
    .cs-seg-hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.82);
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.18);
      padding: 0.3rem 0.7rem;
      border-radius: 100px;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .cs-seg-hero-row {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-top: 1rem;
    }
    .cs-seg-hero-icon {
      width: 52px;
      height: 52px;
      flex-shrink: 0;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.16);
      border: 1px solid rgba(255,255,255,0.22);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    }
    .cs-seg-hero-icon svg { width: 26px; height: 26px; color: #fff; }
    .cs-seg-hero-title {
      font-size: clamp(1.7rem, 4vw, 2.5rem);
      font-weight: 700;
      letter-spacing: -0.03em;
      margin: 0;
      line-height: 1.05;
    }
    .cs-seg-hero-sub {
      margin: 1rem 0 0;
      font-size: 0.95rem;
      font-weight: 500;
      color: rgba(255,255,255,0.85);
      letter-spacing: -0.01em;
    }
    .cs-seg-hero-sub strong { font-weight: 700; color: #fff; }

    /* ── Toolbar / axtarış ── */
    .cs-seg-toolbar {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 1.25rem;
      animation: csSegFade 0.5s var(--cs-ease-apple) 0.14s backwards;
    }
    .cs-seg-search {
      position: relative;
      flex: 1;
      max-width: 420px;
    }
    .cs-seg-search svg {
      position: absolute;
      left: 0.95rem;
      top: 50%;
      transform: translateY(-50%);
      width: 17px;
      height: 17px;
      color: var(--apple-text-tertiary);
      pointer-events: none;
    }
    .cs-seg-search input {
      width: 100%;
      padding: 0.7rem 1rem 0.7rem 2.5rem;
      border: 1px solid rgba(79,124,130,0.16);
      border-radius: 14px;
      background: rgba(255,255,255,0.8);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      font-family: inherit;
      font-size: 0.9rem;
      color: var(--apple-text-primary);
      outline: none;
      transition: border-color 0.25s var(--cs-ease-apple), box-shadow 0.25s var(--cs-ease-apple), background 0.25s var(--cs-ease-apple);
    }
    .cs-seg-search input::placeholder { color: var(--apple-text-tertiary); }
    .cs-seg-search input:focus {
      border-color: rgba(79,124,130,0.45);
      background: #fff;
      box-shadow: 0 0 0 4px rgba(79,124,130,0.10);
    }

    /* ── Grid ── */
    .cs-seg-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
      gap: 1rem;
    }

    /* ── Kart ── */
    .cs-seg-card {
      position: relative;
      background: rgba(255,255,255,0.86);
      backdrop-filter: blur(14px) saturate(150%);
      -webkit-backdrop-filter: blur(14px) saturate(150%);
      border: 1px solid rgba(79,124,130,0.12);
      border-radius: 20px;
      padding: 1.15rem 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
      box-shadow: 0 2px 10px rgba(11,46,51,0.05);
      transition:
        transform 0.3s var(--cs-ease-apple),
        box-shadow 0.3s var(--cs-ease-apple),
        border-color 0.3s var(--cs-ease-apple);
      animation: csSegCard 0.5s var(--cs-ease-apple) backwards;
      overflow: hidden;
    }
    .cs-seg-card::before {
      content: "";
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 4px;
      background: linear-gradient(180deg, var(--seg-from, #4F7C82), var(--seg-to, #0B2E33));
      opacity: 0.9;
    }
    .cs-seg-card.clickable { cursor: pointer; }
    .cs-seg-card.clickable:hover {
      transform: translateY(-4px);
      border-color: rgba(79,124,130,0.28);
      box-shadow: 0 18px 40px rgba(11,46,51,0.14);
    }
    .cs-seg-card.clickable:active { transform: translateY(-1px) scale(0.995); }

    .cs-seg-card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.75rem;
    }
    .cs-seg-card-title {
      font-size: 1.02rem;
      font-weight: 600;
      color: var(--apple-text-primary);
      letter-spacing: -0.015em;
      line-height: 1.3;
      margin: 0;
    }
    .cs-seg-card-chev {
      flex-shrink: 0;
      width: 22px; height: 22px;
      color: var(--apple-text-tertiary);
      opacity: 0;
      transform: translateX(-4px);
      transition: opacity 0.3s var(--cs-ease-apple), transform 0.3s var(--cs-ease-apple);
      margin-top: 2px;
    }
    .cs-seg-card.clickable:hover .cs-seg-card-chev { opacity: 0.85; transform: translateX(0); }

    .cs-seg-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
    .cs-seg-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.28rem 0.6rem;
      border-radius: 8px;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      background: rgba(79,124,130,0.10);
      color: var(--apple-text-tertiary);
      border: 1px solid rgba(79,124,130,0.12);
    }
    .cs-seg-chip.number { font-variant-numeric: tabular-nums; }
    .cs-seg-status {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.28rem 0.65rem;
      border-radius: 8px;
      font-size: 0.72rem;
      font-weight: 600;
      color: #fff;
      background: linear-gradient(135deg, var(--seg-from, #4F7C82), var(--seg-to, #0B2E33));
    }
    .cs-seg-status svg { width: 12px; height: 12px; }

    .cs-seg-meta {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.6rem 1rem;
      padding-top: 0.85rem;
      border-top: 1px solid rgba(79,124,130,0.10);
    }
    .cs-seg-meta-item { min-width: 0; }
    .cs-seg-meta-item.full { grid-column: 1 / -1; }
    .cs-seg-meta-label {
      font-size: 0.66rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--apple-text-tertiary);
      margin-bottom: 0.2rem;
    }
    .cs-seg-meta-value {
      font-size: 0.86rem;
      font-weight: 500;
      color: var(--apple-text-primary);
      letter-spacing: -0.01em;
      word-break: break-word;
    }
    .cs-seg-meta-value.muted { color: var(--apple-text-tertiary); font-weight: 400; }
    .cs-seg-meta-value.overdue { color: var(--apple-red); font-weight: 600; }
    .cs-seg-meta-value.remaining { color: var(--apple-green); font-weight: 600; }

    /* ── Empty ── */
    .cs-seg-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
      padding: 4rem 1rem;
      text-align: center;
      color: var(--apple-text-tertiary);
      animation: csSegFade 0.5s var(--cs-ease-apple) backwards;
    }
    .cs-seg-empty svg { width: 46px; height: 46px; opacity: 0.5; }
    .cs-seg-empty-title { font-size: 1.05rem; font-weight: 600; color: var(--apple-text-secondary); }
    .cs-seg-empty-sub { font-size: 0.88rem; }

    @keyframes csSegFade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes csSegHero {
      from { opacity: 0; transform: translateY(14px) scale(0.99); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes csSegCard {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 640px) {
      .cs-seg-grid { grid-template-columns: 1fr; }
      .cs-seg-meta { grid-template-columns: 1fr 1fr; }
    }


/* ==================== 4. blok (orijinal sətir 17356) ==================== */
/* --- 0) TOKENLƏR: detal və toast .esdb-overlay-ın ÖVLADI DEYİL,
       ona görə də dəyişənlər onlara çatmırdı → rənglər itirdi. --- */
.esdb-detail,.esdb-toast{
  --esdb-ink:#0B2E33; --esdb-ink-2:#3D5A5F; --esdb-ink-3:#7A959A;
  --esdb-teal:#4F7C82; --esdb-teal-soft:rgba(79,124,130,.07);
  --esdb-line:rgba(79,124,130,.13); --esdb-line-soft:rgba(79,124,130,.07);
  --esdb-surface:#FFFFFF;
  --esdb-amber:#D9822B; --esdb-amber-deep:#B26618;
  --esdb-amber-soft:rgba(217,130,43,.10); --esdb-amber-line:rgba(217,130,43,.26);
  --esdb-green:#2E9E68; --esdb-green-soft:rgba(46,158,104,.10);
  --esdb-r-sm:10px; --esdb-r-md:16px; --esdb-r-lg:22px; --esdb-r-xl:28px;
  --esdb-ease:cubic-bezier(.32,.72,0,1);
  --esdb-shadow-1:0 1px 2px rgba(11,46,51,.04), 0 2px 10px rgba(11,46,51,.045);
  --esdb-shadow-2:0 12px 40px rgba(11,46,51,.10);
  --esdb-shadow-3:0 24px 70px rgba(11,46,51,.16);
}

/* --- 1) WEB LAYOUT: soldan başlayan, dar marjinli --- */
.esdb-page{max-width:none;margin:0;padding:0 1.5rem 3rem}
.esdb-nav{margin:0 -1.5rem 1.5rem;padding:.85rem 1.5rem}
.esdb-seg{margin:0 auto 0 1.5rem}
.esdb-dpage{max-width:none;margin:0;padding:1.25rem 1.5rem 3rem}
.esdb-stats{gap:1.1rem}
.esdb-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.esdb-dbody{grid-template-columns:1.55fr 1fr;gap:1.25rem}
@media(min-width:1600px){
  .esdb-page,.esdb-dpage{padding-left:2rem;padding-right:2rem}
  .esdb-nav{margin-left:-2rem;margin-right:-2rem;padding-left:2rem;padding-right:2rem}
  .esdb-seg{margin-left:2rem}
}

/* --- 1b) Filtr menyusu cədvəlin arxasında qalırdı ---
   .esdb-panel-də backdrop-filter var → o, ayrıca stacking context yaradır,
   ona görə menyunun z-index:60-ı yalnız panelin İÇİNDƏ işləyirdi və bütün
   panel DOM sırasına görə .esdb-tablecard-dan ƏVVƏL boyanırdı.
   Paneli mövqeləndirib nav-dan aşağı, cədvəldən yuxarı qatda saxlayırıq. --- */
.esdb-panel{position:relative;z-index:30}
.esdb-tablecard{position:relative;z-index:1}
.esdb-stats{position:relative;z-index:2}
.esdb-cb.open{z-index:70}
.esdb-cb-menu{z-index:80}

/* --- 2) Ctrl+K nişanı getdi → input sağ boşluğu bərpa --- */
.esdb-search input{padding-right:1rem}
.esdb-kbd{display:none!important}

/* --- 3) Ekranın altındakı düzbucaqlı (gizli toast) tam gizlədilir --- */
.esdb-toast{
  transform:translate(-50%,220%);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .38s var(--esdb-ease),opacity .22s linear,visibility .22s linear;
}
.esdb-toast.show{transform:translate(-50%,0);opacity:1;visibility:visible;pointer-events:auto}

/* --- 4) DETAL SƏHİFƏSİ — rəngli versiya --- */
.esdb-detail{
  background:
    radial-gradient(900px 520px at 88% -10%, rgba(255,237,213,.55), transparent 60%),
    radial-gradient(760px 480px at 2% 8%, rgba(219,234,254,.45), transparent 58%),
    linear-gradient(180deg,#FBFCFE 0%,#F4F7FB 100%);
}

/* 5) "Əvvələ qayıt" ən yuxarıda — axında, heç nə ilə üst-üstə düşmür */
.esdb-dtop{display:flex;align-items:center;margin-bottom:1rem}
.esdb-backbtn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.55rem 1rem .55rem .85rem;border-radius:12px;
  border:1.5px solid #E2E8F0;background:#fff;
  font-family:inherit;font-size:.82rem;font-weight:600;color:#334155;
  cursor:pointer;transition:all .2s var(--esdb-ease);
  box-shadow:0 1px 2px rgba(15,23,42,.05);
}
.esdb-backbtn svg{width:16px;height:16px}
.esdb-backbtn:hover{background:#F8FAFC;border-color:#CBD5E1;transform:translateX(-2px)}

.esdb-dhead{align-items:center;margin-bottom:1.15rem;gap:1rem}
.esdb-dhead-t{min-width:0}
.esdb-dtitle{font-size:1.45rem;font-weight:800;color:#0F2942}
.esdb-dsub{font-size:.8rem;color:#64748B}
.esdb-dactions{margin-left:auto;align-items:center}

/* Düymələr — fondan aydın seçilir */
.esdb-detail .esdb-btn{
  background:#fff;border:1.5px solid #E2E8F0;color:#334155;
  box-shadow:0 1px 2px rgba(15,23,42,.05);padding:.6rem 1.05rem;border-radius:12px;
}
.esdb-detail .esdb-btn:hover{background:#F8FAFC;border-color:#CBD5E1}
.esdb-detail .esdb-btn.dark{
  background:#0F2942;border-color:#0F2942;color:#fff;
  box-shadow:0 4px 14px rgba(15,41,66,.28);
}
.esdb-detail .esdb-btn.dark:hover{background:#17395A;border-color:#17395A}
.esdb-detail .esdb-btn.amber{
  background:#FEF1E6;border-color:#F6CFA9;color:#C2691F;
}
.esdb-detail .esdb-btn.amber:hover{background:#FDE6D3;border-color:#EFBB8A}

/* Status pill */
.esdb-detail .esdb-pill{
  background:#E7F7EF;color:#1F8A5B;border:1px solid #BFE8D4;
  padding:.24rem .68rem;font-size:.72rem;
}
.esdb-detail .esdb-pill.bypass{background:#FEF1E6;color:#C2691F;border-color:#F6CFA9}

/* Xülasə lenti */
.esdb-summary{
  background:#fff;border:1.5px solid #EAEFF5;border-radius:20px;
  box-shadow:0 1px 3px rgba(15,23,42,.05);padding:1.15rem 1.4rem;gap:1.25rem;
}
.esdb-sicon{
  width:64px;height:64px;border-radius:20px;
  background:linear-gradient(140deg,#FFE9D2,#FFD6B0);color:#E07B2C;
}
.esdb-sicon.bypass{background:linear-gradient(140deg,#FFE4D0,#FFC9A0);color:#D9701F}
.esdb-sicon-badge{
  position:absolute;right:-5px;bottom:-5px;width:22px;height:22px;border-radius:50%;
  background:#F59E0B;border:3px solid #fff;
}
.esdb-sitem + .esdb-sitem{padding-left:1.25rem;border-left:1px solid #EEF2F7}
.esdb-slabel{color:#64748B;font-size:.7rem;text-transform:none;letter-spacing:0;font-weight:600}
.esdb-sval{color:#0F2942;font-size:1.12rem;font-weight:800}
.esdb-sval.sm{font-size:.92rem;font-weight:600;color:#1E3A55}
.esdb-copy{background:#EEF2F7;color:#64748B}
.esdb-copy:hover{background:#E2E8F0;color:#334155}
.esdb-sbox{
  margin-left:auto;flex-shrink:0;min-width:170px;
  padding:.7rem .95rem;border-radius:14px;
  background:#ECFDF5;border:1px solid #C6F0DC;
}
.esdb-sbox-h{font-size:.68rem;font-weight:700;color:#15805A;margin-bottom:.2rem}
.esdb-sbox-v{font-size:.9rem;font-weight:800;color:#0F2942}
.esdb-sbox-s{font-size:.72rem;color:#4B7B66;margin-top:.1rem}

/* Kartlar */
.esdb-detail .esdb-card{
  background:#fff;border:1.5px solid #EAEFF5;border-radius:20px;
  box-shadow:0 1px 3px rgba(15,23,42,.05);padding:1.3rem 1.4rem;
}
.esdb-detail .esdb-ctitle{font-size:.95rem;font-weight:700;color:#0F2942;margin-bottom:1rem}

/* Rəngli xanalar */
.esdb-detail .esdb-tile{
  background:#fff;border:1.5px solid #EDF1F6;border-radius:14px;padding:.8rem .9rem;
}
.esdb-detail .esdb-tile:hover{border-color:#DBE3EC;box-shadow:0 2px 10px rgba(15,23,42,.06)}
.esdb-detail .esdb-tlabel{color:#64748B;font-size:.68rem;font-weight:600}
.esdb-detail .esdb-tval{color:#0F2942;font-weight:700}
.esdb-detail .esdb-tval.normal{color:#41556B;font-weight:500}
.esdb-detail .esdb-tval small{color:#94A3B8;font-weight:600}
.esdb-detail .esdb-tico{width:36px;height:36px;border-radius:11px}
.esdb-detail .esdb-tico svg{width:18px;height:18px}

.esdb-tico.c-blue  {background:#E8F1FE;color:#3B82F6}
.esdb-tico.c-green {background:#E6F6EF;color:#22A06B}
.esdb-tico.c-purple{background:#F3ECFE;color:#8B5CF6}
.esdb-tico.c-orange{background:#FDF0E3;color:#EE8B36}
.esdb-tico.c-indigo{background:#ECEDFD;color:#6366F1}
.esdb-tico.c-teal  {background:#E1F5F7;color:#0E9AA7}

.esdb-tile.t-green {background:#F6FDF9;border-color:#DFF2E8}
.esdb-tile.t-orange{background:#FFFAF4;border-color:#F8E6D2}
.esdb-tile.t-blue  {background:#FAFCFF;border-color:#E6EEF9}
.esdb-tile.t-indigo{background:#FBFBFF;border-color:#E8E9FA}
.esdb-tile.t-purple{background:#FDFBFF;border-color:#EFE7FB}
.esdb-tile.t-teal  {background:#F7FDFD;border-color:#DDEFF1}
.esdb-detail .esdb-tval.amber{color:#EE8B36}

/* By-Pass paneli */
.esdb-bpstate{
  background:linear-gradient(135deg,#FFF6EC,#FFFBF6);
  border:1.5px solid #F7DCC0;border-radius:16px;padding:1.05rem 1.2rem;
}
.esdb-bpstate.off{background:linear-gradient(135deg,#F1FBF6,#FAFEFC);border-color:#CDEBDC}
.esdb-bplabel{color:#0F2942;font-size:.88rem}
.esdb-bprow{gap:.6rem}
.esdb-switch{width:42px;height:24px;background:#F59E0B;margin-left:0;order:2}
.esdb-switch::after{width:18px;height:18px;left:21px}
.esdb-switch.off{background:#CBD5E1}
.esdb-switch.off::after{left:3px}
.esdb-bpvalue{order:3;color:#C2691F;font-size:.8rem}
.esdb-bpstate.off .esdb-bpvalue{color:#1F8A5B}
.esdb-bpnote{color:#5A7085;font-size:.78rem}

.esdb-block{background:#FAFBFD;border:1px solid #EDF1F6;border-radius:14px;padding:.95rem 1.1rem}
.esdb-block-h{color:#0F2942;font-size:.82rem;font-weight:700}
.esdb-block-h svg{width:15px;height:15px;color:#94A3B8}
.esdb-block-h.warn svg{color:#F97316}
.esdb-block-h.ok svg{color:#22A06B}
.esdb-block-b{color:#41556B;font-size:.81rem}

/* Alt panel — yalnız əməliyyat düymələri */
.esdb-dfoot{border-top:1px solid #EAEFF5;margin-top:1.4rem;padding-top:1.2rem;min-height:1px}
.esdb-dfoot .right{margin-left:auto}

@media(max-width:1080px){
  .esdb-dbody{grid-template-columns:1fr}
  .esdb-sbox{margin-left:0}
}
@media(max-width:860px){
  .esdb-page,.esdb-dpage{padding-left:1rem;padding-right:1rem}
  .esdb-nav{margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}
  .esdb-seg{margin-left:0}
  .esdb-dactions{margin-left:0;width:100%}
}


/* ==================== 5. blok (orijinal sətir 17566) ==================== */
/* ---------- Modul tokenləri --------------------------------------------- */
/* DİQQƏT: tokenlər hər üç kök elementə verilməlidir — detal overlay-i və toast
   .esdb-overlay-in uşağı deyil, ona görə yalnız orada təyin edilsə rəngsiz qalır. */
.esdb-overlay,
.esdb-detail,
.esdb-toast{
  --esdb-ink:#0B2E33;
  --esdb-ink-2:#3D5A5F;
  --esdb-ink-3:#7A959A;
  --esdb-teal:#4F7C82;
  --esdb-teal-soft:rgba(79,124,130,.07);
  --esdb-line:rgba(79,124,130,.13);
  --esdb-line-soft:rgba(79,124,130,.07);
  --esdb-surface:#FFFFFF;

  /* Aksent yalnız BAYPAS vəziyyəti üçün ayrılıb — başqa heç nə narıncı deyil */
  --esdb-amber:#D9822B;
  --esdb-amber-deep:#B26618;
  --esdb-amber-soft:rgba(217,130,43,.10);
  --esdb-amber-line:rgba(217,130,43,.26);

  --esdb-green:#2E9E68;
  --esdb-green-soft:rgba(46,158,104,.10);

  /* Detal kartlarının ikon tonları (nümunə şəklindəki kimi) */
  --t-blue:#3B7EA1;    --t-blue-bg:rgba(59,126,161,.11);
  --t-indigo:#5B6BB5;  --t-indigo-bg:rgba(91,107,181,.11);
  --t-green:#2E9E68;   --t-green-bg:rgba(46,158,104,.11);
  --t-purple:#8A6BB8;  --t-purple-bg:rgba(138,107,184,.11);
  --t-orange:#E08334;  --t-orange-bg:rgba(224,131,52,.12);
  --t-red:#C4574F;     --t-red-bg:rgba(196,87,79,.11);
  --t-teal:#3E8E92;    --t-teal-bg:rgba(62,142,146,.11);
  --t-gray:#64808A;    --t-gray-bg:rgba(100,128,138,.11);

  --esdb-r-sm:10px;
  --esdb-r-md:16px;
  --esdb-r-lg:22px;
  --esdb-r-xl:28px;

  --esdb-ease:cubic-bezier(.32,.72,0,1);
  --esdb-shadow-1:0 1px 2px rgba(11,46,51,.04), 0 2px 10px rgba(11,46,51,.045);
  --esdb-shadow-2:0 12px 40px rgba(11,46,51,.10);
  --esdb-shadow-3:0 24px 70px rgba(11,46,51,.16);
}

/* ---------- Overlay skeleti ---------------------------------------------- */
.esdb-overlay{
  position:fixed; inset:0; z-index:10040;
  background:
    radial-gradient(900px 520px at 82% -8%, rgba(184,227,233,.30), transparent 62%),
    radial-gradient(760px 460px at 6% 104%, rgba(217,130,43,.055), transparent 60%),
    linear-gradient(180deg,#F6FBFC 0%,#EDF6F7 46%,#F6FBFC 100%);
  overflow-y:auto; overflow-x:hidden;
  display:none; opacity:0; visibility:hidden;
  transition:opacity .34s var(--esdb-ease), visibility .34s var(--esdb-ease);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif;
  color:var(--esdb-ink);
  -webkit-font-smoothing:antialiased;
}
.esdb-overlay.visible{display:block; opacity:1; visibility:visible}
.esdb-page{width:100%; max-width:none; margin:0; padding:0 1.75rem 4rem}

/* ---------- Sticky nav ---------------------------------------------------- */
.esdb-nav{
  position:sticky; top:0; z-index:40;
  margin:0 -1.75rem 1.5rem;
  padding:.8rem 1.75rem;
  display:flex; align-items:center; gap:.85rem; flex-wrap:wrap;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(30px) saturate(190%);
  -webkit-backdrop-filter:blur(30px) saturate(190%);
  border-bottom:1px solid var(--esdb-line-soft);
}
.esdb-navback{
  width:38px;height:38px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;border:1px solid var(--esdb-line);
  background:rgba(255,255,255,.8);color:var(--esdb-teal);
  cursor:pointer;transition:all .25s var(--esdb-ease);
}
.esdb-navback:hover{background:#fff;transform:scale(1.06);box-shadow:0 4px 14px rgba(79,124,130,.16)}
.esdb-navback svg{width:17px;height:17px}
.esdb-navtitle{font-size:1.15rem;font-weight:700;letter-spacing:-.026em}
.esdb-navsub{font-size:.74rem;color:var(--esdb-ink-3);margin-top:1px;font-weight:500}
.esdb-navspacer{margin-left:auto}

/* ---------- Reyestr keçidi (segmented control) ---------------------------- */
.esdb-seg{
  display:inline-flex;gap:2px;padding:3px;border-radius:13px;
  background:rgba(79,124,130,.08);border:1px solid var(--esdb-line-soft);
  margin:0 auto;flex-shrink:0;
}
.esdb-seg-b{
  padding:.44rem .95rem;border:none;border-radius:10px;background:transparent;
  font-family:inherit;font-size:.79rem;font-weight:600;letter-spacing:-.012em;
  color:var(--esdb-ink-3);cursor:pointer;white-space:nowrap;
  transition:all .24s var(--esdb-ease);
}
.esdb-seg-b:hover{color:var(--esdb-ink-2)}
.esdb-seg-b.active{
  background:#fff;color:var(--esdb-ink);font-weight:700;
  box-shadow:0 1px 3px rgba(11,46,51,.10),0 0 0 .5px rgba(79,124,130,.08);
}
.esdb-seg-b .n{
  display:inline-block;margin-left:.4rem;padding:.04rem .34rem;border-radius:6px;
  background:rgba(79,124,130,.12);font-size:.66rem;font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--esdb-teal);
}
.esdb-seg-b.active .n{background:var(--esdb-amber-soft);color:var(--esdb-amber-deep)}

/* Köhnə SORA overlay-inə yeridilən keçid */
#bypassOverlay .esdb-seg{margin:0 0 0 1.25rem;vertical-align:middle}

/* ---------- Düymələr ------------------------------------------------------ */
.esdb-btn{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.58rem 1rem;border-radius:12px;
  font-family:inherit;font-size:.8rem;font-weight:600;letter-spacing:-.01em;
  border:1px solid var(--esdb-line);background:rgba(255,255,255,.86);
  color:var(--esdb-ink-2);cursor:pointer;
  transition:all .22s var(--esdb-ease);white-space:nowrap;
}
.esdb-btn svg{width:15px;height:15px}
.esdb-btn:hover{background:#fff;border-color:rgba(79,124,130,.26);transform:translateY(-1px);box-shadow:var(--esdb-shadow-1)}
.esdb-btn:active{transform:translateY(0)}
.esdb-btn.dark{background:var(--esdb-ink);border-color:var(--esdb-ink);color:#fff}
.esdb-btn.dark:hover{background:#123f45;box-shadow:0 8px 22px rgba(11,46,51,.24)}
.esdb-btn.amber{background:var(--esdb-amber-soft);border-color:var(--esdb-amber-line);color:var(--esdb-amber-deep)}
.esdb-btn.amber:hover{background:rgba(217,130,43,.16)}
.esdb-btn.ghost{background:transparent;border-color:transparent;color:var(--esdb-ink-3)}
.esdb-btn.ghost:hover{background:var(--esdb-teal-soft);color:var(--esdb-teal)}
.esdb-btn[disabled]{opacity:.4;pointer-events:none}

/* ---------- Stat kartları ------------------------------------------------- */
.esdb-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.25rem}
.esdb-stat{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:1.1rem;
  padding:1.4rem 1.5rem;border-radius:var(--esdb-r-xl);
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);
  border:1.5px solid var(--esdb-line-soft);
  box-shadow:var(--esdb-shadow-1);
  transition:all .34s var(--esdb-ease);
}
.esdb-stat.clickable{cursor:pointer}
.esdb-stat.clickable:hover{transform:translateY(-3px);box-shadow:var(--esdb-shadow-2);border-color:var(--esdb-line)}
.esdb-stat::after{ /* sakit "sparkline" atmosferi */
  content:'';position:absolute;right:-10%;bottom:-40%;
  width:62%;height:150%;border-radius:50%;
  background:radial-gradient(circle,var(--esdb-teal-soft) 0%,transparent 68%);
  pointer-events:none;
}
.esdb-stat.is-amber::after{background:radial-gradient(circle,var(--esdb-amber-soft) 0%,transparent 68%)}
.esdb-stat-ico{
  width:58px;height:58px;flex-shrink:0;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  background:var(--esdb-teal-soft);color:var(--esdb-teal);
  transition:all .3s var(--esdb-ease);
}
.esdb-stat.is-amber .esdb-stat-ico{background:var(--esdb-amber-soft);color:var(--esdb-amber)}
.esdb-stat-ico svg{width:27px;height:27px}
.esdb-stat-body{position:relative;z-index:1;min-width:0}
.esdb-stat-label{font-size:.76rem;font-weight:600;color:var(--esdb-ink-3);letter-spacing:-.005em}
.esdb-stat.is-amber .esdb-stat-label{color:var(--esdb-amber-deep)}
.esdb-stat-val{
  font-size:2.15rem;font-weight:800;letter-spacing:-.045em;line-height:1.1;
  font-variant-numeric:tabular-nums;margin:.1rem 0;
}
.esdb-stat.is-amber .esdb-stat-val{color:var(--esdb-amber)}
.esdb-stat-val small{font-size:.82rem;font-weight:600;color:var(--esdb-ink-3);letter-spacing:-.01em;margin-left:.3rem}
.esdb-stat-hint{font-size:.72rem;color:var(--esdb-ink-3);font-weight:500}

/* Aktiv (seçili) baypas kartı */
.esdb-stat.selected{border-color:var(--esdb-amber-line);box-shadow:0 0 0 3px rgba(217,130,43,.10), var(--esdb-shadow-1)}
.esdb-stat-check{
  position:absolute;top:.9rem;right:1rem;z-index:2;
  display:none;align-items:center;gap:.28rem;
  font-size:.63rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:.2rem .5rem;border-radius:7px;
  background:var(--esdb-amber);color:#fff;
}
.esdb-stat.selected .esdb-stat-check{display:inline-flex}

/* SİQNATUR: baypas nisbəti halqası */
.esdb-ring{position:relative;width:58px;height:58px;flex-shrink:0}
.esdb-ring-bg{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(var(--esdb-amber) calc(var(--pct,0)*1%), rgba(79,124,130,.13) 0);
  transition:background .8s var(--esdb-ease);
}
.esdb-ring-hole{
  position:absolute;inset:7px;border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;
  font-size:.6rem;font-weight:800;color:var(--esdb-amber);letter-spacing:-.02em;
}

/* ---------- Axtarış + filtr paneli --------------------------------------- */
.esdb-panel{
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);
  border:1.5px solid var(--esdb-line-soft);
  border-radius:var(--esdb-r-xl);
  box-shadow:var(--esdb-shadow-1);
  padding:1.15rem 1.35rem;
  margin-bottom:1.25rem;
}
.esdb-searchrow{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.esdb-search{
  position:relative;flex:1;min-width:260px;
}
.esdb-search svg{
  position:absolute;left:.95rem;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--esdb-ink-3);pointer-events:none;
}
.esdb-search input{
  width:100%;padding:.78rem 1.1rem .78rem 2.75rem;
  border-radius:14px;border:1.5px solid var(--esdb-line);
  background:rgba(246,251,252,.7);
  font-family:inherit;font-size:.86rem;color:var(--esdb-ink);
  transition:all .24s var(--esdb-ease);
}
.esdb-search input::placeholder{color:var(--esdb-ink-3)}
.esdb-search input:focus{
  outline:none;background:#fff;border-color:rgba(79,124,130,.4);
  box-shadow:0 0 0 4px rgba(79,124,130,.09);
}
.esdb-filters{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:.85rem 1rem;margin-top:1.1rem;
  padding-top:1.1rem;border-top:1px solid var(--esdb-line-soft);
}
.esdb-filters.hidden{display:none}
.esdb-field{display:flex;flex-direction:column;gap:.36rem;min-width:0}
.esdb-field-label{
  font-size:.7rem;font-weight:700;color:var(--esdb-ink-3);
  letter-spacing:.015em;
}

/* Combobox (axtarışlı seçim) */
.esdb-cb{position:relative}
.esdb-cb-input{
  width:100%;padding:.62rem 2.1rem .62rem .85rem;
  border-radius:12px;border:1.5px solid var(--esdb-line);
  background:rgba(246,251,252,.62);
  font-family:inherit;font-size:.82rem;font-weight:500;color:var(--esdb-ink);
  cursor:pointer;transition:all .2s var(--esdb-ease);
  text-overflow:ellipsis;
}
.esdb-cb-input:focus{outline:none;background:#fff;border-color:rgba(79,124,130,.4);box-shadow:0 0 0 4px rgba(79,124,130,.09)}
.esdb-cb.active .esdb-cb-input{background:rgba(79,124,130,.06);border-color:rgba(79,124,130,.3);font-weight:600}
.esdb-cb-caret{
  position:absolute;right:.7rem;top:50%;transform:translateY(-50%);
  width:14px;height:14px;color:var(--esdb-ink-3);pointer-events:none;transition:transform .22s var(--esdb-ease);
}
.esdb-cb.open .esdb-cb-caret{transform:translateY(-50%) rotate(180deg)}
.esdb-cb-menu{
  display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  max-height:266px;overflow-y:auto;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--esdb-line);border-radius:14px;
  box-shadow:var(--esdb-shadow-2);padding:.32rem;
  animation:esdbPop .18s var(--esdb-ease) both;
}
.esdb-cb.open .esdb-cb-menu{display:block}
@keyframes esdbPop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.esdb-cb-opt{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.5rem .65rem;border-radius:9px;
  font-size:.8rem;color:var(--esdb-ink-2);cursor:pointer;
  transition:background .14s;
}
.esdb-cb-opt:hover,.esdb-cb-opt.hl{background:var(--esdb-teal-soft);color:var(--esdb-ink)}
.esdb-cb-opt.sel{background:rgba(79,124,130,.12);color:var(--esdb-ink);font-weight:700}
.esdb-cb-opt span:last-child{font-size:.68rem;color:var(--esdb-ink-3);font-variant-numeric:tabular-nums;flex-shrink:0}
.esdb-cb-empty{padding:.75rem;text-align:center;font-size:.76rem;color:var(--esdb-ink-3)}

/* Aktiv filtr çipləri */
.esdb-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
.esdb-chips:empty{display:none}
.esdb-chip{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.26rem .5rem .26rem .7rem;border-radius:100px;
  background:var(--esdb-teal-soft);border:1px solid var(--esdb-line);
  font-size:.72rem;font-weight:600;color:var(--esdb-teal);
}
.esdb-chip b{font-weight:700;color:var(--esdb-ink)}
.esdb-chip button{
  width:16px;height:16px;border:none;border-radius:50%;
  background:rgba(79,124,130,.16);color:var(--esdb-teal);
  cursor:pointer;font-size:.7rem;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:all .18s;
}
.esdb-chip button:hover{background:var(--esdb-teal);color:#fff}

/* ---------- Cədvəl -------------------------------------------------------- */
.esdb-tablecard{
  background:rgba(255,255,255,.94);
  border:1.5px solid var(--esdb-line-soft);
  border-radius:var(--esdb-r-xl);
  box-shadow:var(--esdb-shadow-1);
  overflow:hidden;
}
.esdb-tablebar{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  padding:.9rem 1.25rem;border-bottom:1px solid var(--esdb-line-soft);
  background:rgba(246,251,252,.5);
}
.esdb-tablebar-title{font-size:.86rem;font-weight:700;letter-spacing:-.015em}
.esdb-tablebar-count{
  font-size:.72rem;font-weight:700;color:var(--esdb-teal);
  padding:.18rem .5rem;border-radius:7px;background:var(--esdb-teal-soft);
  font-variant-numeric:tabular-nums;
}
.esdb-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.esdb-scroll::-webkit-scrollbar{height:8px}
.esdb-scroll::-webkit-scrollbar-thumb{background:rgba(79,124,130,.2);border-radius:8px}

.esdb-table{width:100%;border-collapse:separate;border-spacing:0;min-width:1080px}
.esdb-table thead th{
  position:sticky;top:0;z-index:5;
  background:rgba(248,252,253,.97);
  backdrop-filter:blur(12px);
  padding:.8rem 1rem;text-align:left;
  font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--esdb-ink-3);white-space:nowrap;
  border-bottom:1px solid var(--esdb-line);
  cursor:pointer;user-select:none;transition:color .18s;
}
.esdb-table thead th:hover{color:var(--esdb-teal)}
.esdb-table thead th.nosort{cursor:default}
.esdb-th-in{display:inline-flex;align-items:center;gap:.3rem}
.esdb-sort{width:11px;height:11px;opacity:0;transition:opacity .2s,transform .2s}
.esdb-table thead th.sorted .esdb-sort{opacity:.85}
.esdb-table thead th.sorted.desc .esdb-sort{transform:rotate(180deg)}

.esdb-table tbody td{
  padding:.85rem 1rem;font-size:.83rem;color:var(--esdb-ink-2);
  border-bottom:1px solid var(--esdb-line-soft);vertical-align:middle;
}
.esdb-table tbody tr{cursor:pointer;transition:background .16s}
.esdb-table tbody tr:hover{background:rgba(184,227,233,.16)}
.esdb-table tbody tr.checked{background:rgba(79,124,130,.06)}
.esdb-table tbody tr:last-child td{border-bottom:none}
.esdb-col-check{width:44px;padding-left:1.25rem!important}
.esdb-col-dot{width:26px;padding-left:0!important;padding-right:0!important}

/* Vəziyyət relsi — baypas semantikasının yeganə rəng daşıyıcısı */
.esdb-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(79,124,130,.24);display:block;
}
.esdb-dot.bypass{
  background:var(--esdb-amber);
  box-shadow:0 0 0 3px var(--esdb-amber-soft);
}
.esdb-tag{
  font-weight:700;color:var(--esdb-ink);letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.esdb-mono{font-variant-numeric:tabular-nums;white-space:nowrap}
.esdb-muted{color:var(--esdb-ink-3)}
.esdb-clip{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}

/* Checkbox */
.esdb-cx{
  appearance:none;-webkit-appearance:none;
  width:17px;height:17px;border-radius:5px;
  border:1.5px solid rgba(79,124,130,.32);background:#fff;
  cursor:pointer;position:relative;transition:all .18s var(--esdb-ease);flex-shrink:0;
}
.esdb-cx:hover{border-color:var(--esdb-teal)}
.esdb-cx:checked{background:var(--esdb-teal);border-color:var(--esdb-teal)}
.esdb-cx:checked::after{
  content:'';position:absolute;left:5px;top:1.5px;
  width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg);
}
.esdb-cx:indeterminate{background:var(--esdb-teal);border-color:var(--esdb-teal)}
.esdb-cx:indeterminate::after{
  content:'';position:absolute;left:3px;top:6.5px;width:9px;height:2px;background:#fff;border-radius:1px;
}

/* ---------- Səhifələmə ---------------------------------------------------- */
.esdb-pager{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.9rem 1.25rem;border-top:1px solid var(--esdb-line-soft);
  background:rgba(246,251,252,.5);
  font-size:.78rem;color:var(--esdb-ink-3);
}
.esdb-pager-nums{display:flex;align-items:center;gap:.3rem;margin:0 auto}
.esdb-pg{
  min-width:32px;height:32px;padding:0 .5rem;
  display:flex;align-items:center;justify-content:center;
  border-radius:9px;border:1px solid transparent;background:transparent;
  font-family:inherit;font-size:.78rem;font-weight:600;color:var(--esdb-ink-2);
  cursor:pointer;transition:all .18s var(--esdb-ease);font-variant-numeric:tabular-nums;
}
.esdb-pg:hover:not([disabled]){background:var(--esdb-teal-soft);border-color:var(--esdb-line)}
.esdb-pg.active{background:var(--esdb-ink);color:#fff;border-color:var(--esdb-ink)}
.esdb-pg[disabled]{opacity:.28;pointer-events:none}
.esdb-pg.dots{pointer-events:none;color:var(--esdb-ink-3)}
.esdb-pg svg{width:14px;height:14px}
.esdb-psize{display:flex;align-items:center;gap:.5rem}
.esdb-psize select{
  padding:.35rem 1.7rem .35rem .6rem;border-radius:9px;
  border:1px solid var(--esdb-line);background:#fff;
  font-family:inherit;font-size:.78rem;font-weight:600;color:var(--esdb-ink-2);cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F7C82' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .45rem center;background-size:11px;
}

/* ---------- Boş / yüklənir ------------------------------------------------ */
.esdb-empty{padding:4.5rem 2rem;text-align:center}
.esdb-empty-ico{
  width:64px;height:64px;margin:0 auto 1rem;border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  background:var(--esdb-teal-soft);color:var(--esdb-teal);
}
.esdb-empty-ico svg{width:28px;height:28px}
.esdb-empty h4{font-size:1rem;font-weight:700;margin-bottom:.35rem}
.esdb-empty p{font-size:.83rem;color:var(--esdb-ink-3);max-width:380px;margin:0 auto 1.1rem}

.esdb-skel{height:14px;border-radius:6px;background:linear-gradient(90deg,rgba(79,124,130,.07),rgba(79,124,130,.14),rgba(79,124,130,.07));background-size:220% 100%;animation:esdbShim 1.25s linear infinite}
@keyframes esdbShim{to{background-position:-220% 0}}

/* ==========================================================================
   DETAL SƏHİFƏSİ
   ========================================================================== */
.esdb-detail{
  position:fixed;inset:0;z-index:10060;
  background:
    radial-gradient(880px 500px at 84% -6%, rgba(184,227,233,.34), transparent 62%),
    linear-gradient(180deg,#F6FBFC 0%,#EEF7F8 100%);
  overflow-y:auto;display:none;opacity:0;
  transition:opacity .3s var(--esdb-ease);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif;
  color:var(--esdb-ink);
}
.esdb-detail.visible{display:block;opacity:1}
.esdb-dpage{width:100%;max-width:none;margin:0;padding:0 1.75rem 4rem}

/* Detal naviqasiyası — "Əvvələ qayıt" yuxarıda, heç nə ilə üst-üstə düşmür */
.esdb-dnav{
  position:sticky; top:0; z-index:40;
  margin:0 -1.75rem 1.5rem;
  padding:.8rem 1.75rem;
  display:flex; align-items:center; gap:.85rem; flex-wrap:wrap;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(30px) saturate(190%);
  -webkit-backdrop-filter:blur(30px) saturate(190%);
  border-bottom:1px solid var(--esdb-line-soft);
}
.esdb-dnav-back{
  display:inline-flex;align-items:center;gap:.45rem;flex-shrink:0;
  height:38px;padding:0 .9rem 0 .7rem;border-radius:12px;
  border:1px solid var(--esdb-line);background:rgba(255,255,255,.9);
  font-family:inherit;font-size:.8rem;font-weight:600;color:var(--esdb-ink-2);
  cursor:pointer;transition:all .24s var(--esdb-ease);
}
.esdb-dnav-back:hover{background:#fff;border-color:rgba(79,124,130,.3);box-shadow:var(--esdb-shadow-1);transform:translateX(-2px)}
.esdb-dnav-back svg{width:16px;height:16px}
.esdb-dnav-t{min-width:0}
.esdb-dnav-title{font-size:1.08rem;font-weight:700;letter-spacing:-.028em;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.esdb-dnav-sub{font-size:.73rem;color:var(--esdb-ink-3);margin-top:1px;font-weight:500}

.esdb-pill{
  display:inline-flex;align-items:center;gap:.32rem;
  padding:.22rem .6rem;border-radius:100px;
  font-size:.7rem;font-weight:700;letter-spacing:-.005em;
  background:var(--esdb-green-soft);color:var(--esdb-green);
  border:1px solid rgba(46,158,104,.22);
}
.esdb-pill.bypass{background:var(--esdb-amber-soft);color:var(--esdb-amber-deep);border-color:var(--esdb-amber-line)}
.esdb-pill i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block}

/* Xülasə lenti */
.esdb-summary{
  display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;
  padding:1.25rem 1.5rem;border-radius:var(--esdb-r-xl);
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  border:1.5px solid var(--esdb-line-soft);box-shadow:var(--esdb-shadow-1);
  margin-bottom:1.25rem;
}
.esdb-sicon{
  width:62px;height:62px;border-radius:20px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;position:relative;
  background:var(--esdb-teal-soft);color:var(--esdb-teal);
}
.esdb-sicon.bypass{background:var(--esdb-amber-soft);color:var(--esdb-amber)}
.esdb-sicon svg{width:30px;height:30px}
.esdb-sitem{min-width:0}
.esdb-sitem + .esdb-sitem{padding-left:1.4rem;border-left:1px solid var(--esdb-line-soft)}
.esdb-slabel{font-size:.68rem;font-weight:700;color:var(--esdb-ink-3);letter-spacing:.03em;text-transform:uppercase;margin-bottom:.22rem}
.esdb-sval{font-size:1.02rem;font-weight:700;letter-spacing:-.022em;display:flex;align-items:center;gap:.4rem}
.esdb-copy{
  width:24px;height:24px;border:none;border-radius:7px;background:var(--esdb-teal-soft);
  color:var(--esdb-teal);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .2s;flex-shrink:0;
}
.esdb-copy:hover{background:rgba(79,124,130,.16)}
.esdb-copy svg{width:12px;height:12px}

/* İki sütunlu gövdə */
.esdb-dbody{display:grid;grid-template-columns:1.15fr .85fr;gap:1.25rem;align-items:start}
.esdb-dbody > div:last-child{position:sticky;top:1.5rem}
.esdb-card{
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  border:1.5px solid var(--esdb-line-soft);border-radius:var(--esdb-r-xl);
  box-shadow:var(--esdb-shadow-1);padding:1.4rem 1.5rem;
}
.esdb-card + .esdb-card{margin-top:1.1rem}
.esdb-ctitle{
  font-size:.95rem;font-weight:700;letter-spacing:-.022em;margin-bottom:1.1rem;
  display:flex;align-items:center;gap:.5rem;
}
.esdb-ctitle svg{width:17px;height:17px;color:var(--esdb-teal)}

.esdb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem}
.esdb-tile{
  display:flex;align-items:flex-start;gap:.7rem;
  padding:.85rem .95rem;border-radius:var(--esdb-r-md);
  background:rgba(246,251,252,.75);border:1px solid var(--esdb-line-soft);
  transition:all .24s var(--esdb-ease);min-width:0;
}
.esdb-tile:hover{background:#fff;border-color:var(--esdb-line);box-shadow:var(--esdb-shadow-1)}
.esdb-tile.full{grid-column:1/-1}
.esdb-tico{
  width:34px;height:34px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--t-gray-bg);color:var(--t-gray);
}
.esdb-tico.t-blue  {background:var(--t-blue-bg);  color:var(--t-blue)}
.esdb-tico.t-indigo{background:var(--t-indigo-bg);color:var(--t-indigo)}
.esdb-tico.t-green {background:var(--t-green-bg); color:var(--t-green)}
.esdb-tico.t-purple{background:var(--t-purple-bg);color:var(--t-purple)}
.esdb-tico.t-orange{background:var(--t-orange-bg);color:var(--t-orange)}
.esdb-tico.t-red   {background:var(--t-red-bg);   color:var(--t-red)}
.esdb-tico.t-teal  {background:var(--t-teal-bg);  color:var(--t-teal)}
.esdb-tico svg{width:17px;height:17px}
.esdb-tbody{min-width:0;flex:1}
.esdb-tlabel{font-size:.68rem;font-weight:600;color:var(--esdb-ink-3);margin-bottom:.18rem}
.esdb-tval{font-size:.86rem;font-weight:700;letter-spacing:-.015em;line-height:1.4;word-break:break-word}
.esdb-tval.lg{font-size:1.25rem;letter-spacing:-.03em}
.esdb-tval.amber{color:var(--esdb-amber)}
.esdb-tval.normal{font-weight:500;color:var(--esdb-ink-2);font-size:.83rem;line-height:1.6}
.esdb-tval small{font-size:.7rem;font-weight:600;color:var(--esdb-ink-3);margin-left:.22rem}

/* Baypas paneli — sağ sütun */
.esdb-bpstate{
  padding:1.15rem 1.3rem;border-radius:var(--esdb-r-lg);
  background:linear-gradient(135deg,rgba(217,130,43,.07),rgba(217,130,43,.02));
  border:1.5px solid var(--esdb-amber-line);margin-bottom:1rem;
}
.esdb-bpstate.off{background:linear-gradient(135deg,rgba(46,158,104,.06),rgba(46,158,104,.015));border-color:rgba(46,158,104,.22)}
.esdb-bprow{display:flex;align-items:center;gap:.7rem}
.esdb-bplabel{font-size:.88rem;font-weight:700;letter-spacing:-.018em}
.esdb-switch{
  width:44px;height:26px;border-radius:100px;border:none;flex-shrink:0;
  background:var(--esdb-amber);position:relative;cursor:default;
  transition:background .3s var(--esdb-ease);margin-left:auto;
}
.esdb-switch.off{background:rgba(79,124,130,.24)}
.esdb-switch::after{
  content:'';position:absolute;top:3px;left:21px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(11,46,51,.22);
  transition:left .3s var(--esdb-ease);
}
.esdb-switch.off::after{left:3px}
.esdb-bpvalue{font-size:.78rem;font-weight:700;color:var(--esdb-amber-deep)}
.esdb-bpstate.off .esdb-bpvalue{color:var(--esdb-green)}
.esdb-bpnote{font-size:.78rem;color:var(--esdb-ink-2);margin-top:.55rem;line-height:1.55}

.esdb-block{
  padding:1rem 1.15rem;border-radius:var(--esdb-r-md);
  background:rgba(246,251,252,.75);border:1px solid var(--esdb-line-soft);
  margin-bottom:.75rem;
}
.esdb-block-h{
  display:flex;align-items:center;gap:.42rem;
  font-size:.78rem;font-weight:700;margin-bottom:.5rem;letter-spacing:-.012em;
}
.esdb-block-h svg{width:15px;height:15px;color:var(--t-gray)}
.esdb-block-h.warn svg{color:var(--t-red)}
.esdb-block-h.fix svg{color:var(--t-green)}
.esdb-tval.t-blue{color:var(--t-blue)}
.esdb-tval.t-orange{color:var(--t-orange)}
.esdb-tval.t-teal{color:var(--t-teal)}
.esdb-tval.t-purple{color:var(--t-purple)}
.esdb-block-b{font-size:.82rem;color:var(--esdb-ink-2);line-height:1.65;white-space:pre-line;word-break:break-word}

/* Alt hərəkət paneli */
.esdb-dfoot{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--esdb-line-soft);
}
.esdb-dfoot .right{margin-left:auto;display:flex;gap:.6rem;flex-wrap:wrap}

/* Redaktə sahələri */
.esdb-in{
  width:100%;padding:.6rem .8rem;border-radius:11px;
  border:1.5px solid rgba(79,124,130,.28);background:#fff;
  font-family:inherit;font-size:.82rem;color:var(--esdb-ink);line-height:1.55;
  transition:all .2s var(--esdb-ease);resize:vertical;
}
.esdb-in:focus{outline:none;border-color:var(--esdb-teal);box-shadow:0 0 0 4px rgba(79,124,130,.1)}

/* Toast */
.esdb-toast{
  position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%,140%);
  z-index:10090;display:flex;align-items:center;gap:.55rem;
  padding:.75rem 1.15rem;border-radius:14px;
  background:rgba(11,46,51,.95);backdrop-filter:blur(20px);
  color:#fff;font-size:.83rem;font-weight:600;letter-spacing:-.01em;
  box-shadow:var(--esdb-shadow-3);
  transition:transform .4s var(--esdb-ease), opacity .25s ease, visibility .25s;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif;
  /* Gizli olduqda tam görünməz olmalıdır — əks halda ekranın altında qaralmış zolaq qalır */
  opacity:0;visibility:hidden;pointer-events:none;
}
.esdb-toast.show{transform:translate(-50%,0);opacity:1;visibility:visible}
.esdb-toast svg{width:16px;height:16px;flex-shrink:0}
.esdb-toast.err{background:rgba(150,42,42,.95)}

/* Fokus görünürlüyü */
.esdb-overlay :focus-visible,.esdb-detail :focus-visible{
  outline:2px solid var(--esdb-teal);outline-offset:2px;border-radius:8px;
}

/* Giriş animasiyası */
@keyframes esdbRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.esdb-overlay.visible .esdb-stats,
.esdb-overlay.visible .esdb-panel,
.esdb-overlay.visible .esdb-tablecard{animation:esdbRise .45s var(--esdb-ease) both}
.esdb-overlay.visible .esdb-panel{animation-delay:.05s}
.esdb-overlay.visible .esdb-tablecard{animation-delay:.1s}
.esdb-detail.visible .esdb-summary,
.esdb-detail.visible .esdb-dbody{animation:esdbRise .4s var(--esdb-ease) both}
.esdb-detail.visible .esdb-dbody{animation-delay:.06s}

@media (prefers-reduced-motion:reduce){
  .esdb-overlay *,.esdb-detail *{animation:none!important;transition-duration:.01ms!important}
}

/* ---------- Adaptiv ------------------------------------------------------- */
@media(max-width:1080px){
  .esdb-dbody{grid-template-columns:1fr}
  .esdb-dbody > div:last-child{position:static}
}
@media(max-width:860px){
  .esdb-stats{grid-template-columns:1fr}
  .esdb-page,.esdb-dpage{padding-left:1rem;padding-right:1rem}
  .esdb-nav,.esdb-dnav{margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}
  .esdb-summary{gap:1rem}
  .esdb-sitem + .esdb-sitem{padding-left:0;border-left:none}
  .esdb-dnav-title{font-size:1rem}
  .esdb-pager{justify-content:center}
  .esdb-pager-nums{margin:0;order:-1;width:100%;justify-content:center}
  .esdb-dfoot .right{width:100%}
  .esdb-dfoot .right .esdb-btn{flex:1;justify-content:center}
}


/* ==================== 6. blok (orijinal sətir 37635) ==================== */
.mr-page{position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,#F8FBFC 0%,#EEF6F7 50%,#F8FBFC 100%);z-index:10000;display:none;overflow-y:auto;overflow-x:hidden;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.mr-page.visible{display:block;opacity:1;visibility:visible}
.mr-page-content{max-width:960px;width:100%;margin:0 auto;padding:0 1.5rem 4rem;min-height:100vh}
.mr-nav-header{position:sticky;top:0;z-index:100;background:rgba(248,251,252,.85);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);padding:1rem 0;margin-bottom:1.5rem;border-bottom:1px solid rgba(79,124,130,.08)}
.mr-nav-inner{display:flex;align-items:center;gap:1rem}
.mr-back-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.8);border:1px solid rgba(79,124,130,.12);border-radius:12px;cursor:pointer;color:var(--winter-medium);flex-shrink:0;transition:all .25s cubic-bezier(.2,.8,.2,1)}
.mr-back-btn:hover{background:#fff;border-color:var(--winter-medium);transform:scale(1.05);box-shadow:0 4px 12px rgba(79,124,130,.15)}
.mr-back-btn svg{width:18px;height:18px}
.mr-page-title{font-size:1.5rem;font-weight:700;color:var(--winter-dark);margin:0;letter-spacing:-.025em}
.mr-main-tabs{display:flex;gap:.75rem;margin-bottom:2rem}
.mr-main-tab{flex:1;position:relative;padding:1.25rem 1rem;border-radius:20px;background:rgba(255,255,255,.7);border:1.5px solid rgba(79,124,130,.1);cursor:pointer;text-align:center;backdrop-filter:blur(8px);transition:all .3s cubic-bezier(.2,.8,.2,1)}
.mr-main-tab:hover{background:rgba(255,255,255,.95);border-color:rgba(79,124,130,.25);transform:translateY(-2px);box-shadow:0 8px 24px rgba(79,124,130,.1)}
.mr-main-tab.active{background:#fff;border-color:var(--winter-medium);box-shadow:0 8px 32px rgba(79,124,130,.15);transform:translateY(-2px)}
.mr-main-tab.active::after{content:'';position:absolute;bottom:-1.5px;left:30%;right:30%;height:3px;background:var(--winter-medium);border-radius:3px}
.mr-tab-emoji{font-size:1.75rem;display:block;margin-bottom:.4rem}
.mr-tab-label{font-size:.82rem;font-weight:600;color:var(--apple-text-secondary)}
.mr-main-tab.active .mr-tab-label{color:var(--winter-dark)}
.mr-card{background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-radius:20px;border:1px solid rgba(79,124,130,.08);padding:1.5rem;margin-bottom:1rem;box-shadow:0 2px 12px rgba(11,46,51,.04);transition:all .25s ease}
.mr-card:hover{box-shadow:0 4px 20px rgba(11,46,51,.08)}
.mr-card-title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--apple-text-tertiary);margin-bottom:.75rem}
.mr-form-group{margin-bottom:1.25rem}
.mr-form-label{display:block;font-size:.78rem;font-weight:600;color:var(--apple-text-secondary);margin-bottom:.4rem}
.mr-form-select,.mr-form-input{width:100%;padding:.7rem 1rem;border-radius:14px;border:1.5px solid rgba(79,124,130,.15);background:rgba(255,255,255,.9);font-size:.9rem;color:var(--apple-text-primary);outline:none;transition:all .2s;font-family:inherit;box-sizing:border-box}
.mr-form-select:focus,.mr-form-input:focus{border-color:var(--winter-medium);box-shadow:0 0 0 3px rgba(79,124,130,.1)}
.mr-type-options{display:flex;flex-direction:column;gap:.5rem}
.mr-type-option{display:flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border-radius:14px;border:1.5px solid rgba(79,124,130,.1);background:rgba(255,255,255,.7);cursor:pointer;transition:all .2s}
.mr-type-option:hover{background:rgba(255,255,255,1);border-color:rgba(79,124,130,.2)}
.mr-type-option.selected{border-color:var(--winter-medium);background:rgba(79,124,130,.05)}
.mr-type-radio{width:20px;height:20px;border-radius:50%;border:2px solid rgba(79,124,130,.3);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}
.mr-type-option.selected .mr-type-radio{border-color:var(--winter-medium)}
.mr-type-radio-dot{width:10px;height:10px;border-radius:50%;background:var(--winter-medium);transform:scale(0);transition:transform .2s}
.mr-type-option.selected .mr-type-radio-dot{transform:scale(1)}
.mr-type-option.type-overdue.selected{border-color:var(--status-red);background:rgba(220,53,69,.04)}
.mr-type-option.type-overdue.selected .mr-type-radio{border-color:var(--status-red)}
.mr-type-option.type-overdue.selected .mr-type-radio-dot{background:var(--status-red)}
.mr-type-option.type-active.selected{border-color:var(--status-orange);background:rgba(230,126,34,.04)}
.mr-type-option.type-active.selected .mr-type-radio{border-color:var(--status-orange)}
.mr-type-option.type-active.selected .mr-type-radio-dot{background:var(--status-orange)}
.mr-type-info{flex:1}
.mr-type-title{font-size:.88rem;font-weight:600;color:var(--winter-dark)}
.mr-type-desc{font-size:.76rem;color:var(--apple-text-tertiary);margin-top:.15rem}
.mr-recipients-grid{display:grid;gap:.6rem;margin-top:.5rem;max-height:450px;overflow-y:auto}
.mr-recipient-item{display:flex;align-items:flex-start;gap:.75rem;padding:1rem 1.1rem;border-radius:14px;background:rgba(255,255,255,.7);border:1.5px solid rgba(79,124,130,.08);cursor:pointer;transition:all .2s}
.mr-recipient-item:hover{background:rgba(255,255,255,1);border-color:rgba(79,124,130,.2)}
.mr-recipient-item.selected{background:rgba(79,124,130,.06);border-color:var(--winter-medium)}
.mr-recipient-cb{width:22px;height:22px;border-radius:7px;border:2px solid rgba(79,124,130,.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;background:white;margin-top:2px}
.mr-recipient-item.selected .mr-recipient-cb{background:var(--winter-medium);border-color:var(--winter-medium)}
.mr-recipient-cb-check{width:14px;height:14px;stroke:white;opacity:0;transition:opacity .15s}
.mr-recipient-item.selected .mr-recipient-cb-check{opacity:1}
.mr-recipient-info{flex:1;min-width:0}
.mr-recipient-actions{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.5rem}
.mr-recipient-action-row{font-size:.9rem;font-weight:700;color:var(--apple-text-primary);line-height:1.5;padding:.45rem .75rem;background:rgba(79,124,130,.04);border-radius:8px;border-left:3px solid var(--winter-medium)}
.mr-recipient-name{font-size:.82rem;font-weight:600;color:var(--apple-text-secondary);margin-bottom:.1rem}
.mr-recipient-email{font-size:.75rem;color:var(--apple-text-tertiary)}
.mr-recipient-count{font-size:.72rem;padding:.2rem .55rem;border-radius:100px;background:rgba(79,124,130,.08);color:var(--winter-medium);font-weight:600;white-space:nowrap;align-self:flex-start;margin-top:2px}

/* MR Year Pills */
.mr-year-pills{display:flex;gap:.4rem;flex-wrap:wrap}
.mr-year-pill{display:inline-flex;align-items:center;justify-content:center;padding:.4rem .9rem;border-radius:100px;background:rgba(79,124,130,.06);border:1.5px solid rgba(79,124,130,.12);cursor:pointer;transition:all .25s ease;font-size:.82rem;font-weight:600;color:var(--winter-medium);user-select:none}
.mr-year-pill:hover{background:rgba(79,124,130,.12);border-color:rgba(79,124,130,.25)}
.mr-year-pill.active{background:var(--winter-medium);border-color:var(--winter-dark);color:#fff;box-shadow:0 2px 8px rgba(79,124,130,.25)}

/* MR CC Search Dropdown */
.mr-cc-search-wrap{position:relative;width:100%}
.mr-cc-search-input{width:100% !important}
.mr-cc-dropdown{position:absolute;top:100%;left:0;right:0;z-index:10;max-height:220px;overflow-y:auto;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1.5px solid rgba(79,124,130,.15);border-radius:12px;box-shadow:0 12px 40px rgba(11,46,51,.12);display:none;margin-top:4px}
.mr-cc-dropdown.visible{display:block;animation:crudSlideUp .2s ease}
.mr-cc-dropdown-item{display:flex;align-items:center;gap:.6rem;padding:.6rem .85rem;cursor:pointer;transition:all .15s ease;border-bottom:1px solid rgba(79,124,130,.04)}
.mr-cc-dropdown-item:last-child{border-bottom:none}
.mr-cc-dropdown-item:hover{background:rgba(79,124,130,.06)}
.mr-cc-dropdown-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--winter-light),var(--winter-medium));color:#fff;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;flex-shrink:0}
.mr-cc-dropdown-info{flex:1;min-width:0}
.mr-cc-dropdown-name{font-size:.82rem;font-weight:600;color:var(--winter-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mr-cc-dropdown-email{font-size:.72rem;color:var(--apple-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mr-cc-dropdown-dept{font-size:.65rem;padding:.1rem .4rem;border-radius:4px;background:rgba(79,124,130,.06);color:var(--winter-medium);white-space:nowrap}
.mr-cc-dropdown-empty{padding:1rem;text-align:center;color:var(--apple-text-tertiary);font-size:.82rem}
.mr-cc-dropdown-add{display:flex;align-items:center;gap:.5rem;padding:.65rem .85rem;cursor:pointer;transition:all .15s;background:rgba(79,124,130,.03);border-top:1.5px solid rgba(79,124,130,.08);color:var(--winter-medium);font-weight:600;font-size:.82rem}
.mr-cc-dropdown-add:hover{background:rgba(79,124,130,.08)}
.mr-cc-dropdown-add svg{width:14px;height:14px}
.mr-select-all-row{display:flex;align-items:center;gap:.5rem;padding:.5rem 0;margin-bottom:.5rem;cursor:pointer;font-size:.82rem;font-weight:600;color:var(--winter-medium);border-bottom:1px solid rgba(79,124,130,.08)}
.mr-cc-row{display:flex;gap:.4rem;align-items:center}
.mr-cc-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.4rem}
.mr-cc-chip{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .6rem;border-radius:100px;background:rgba(79,124,130,.06);border:1px solid rgba(79,124,130,.15);font-size:.76rem;color:var(--winter-dark)}
.mr-cc-chip button{background:none;border:none;cursor:pointer;color:var(--apple-red);font-size:.9rem;padding:0;line-height:1}
.mr-send-btn{width:100%;padding:1rem;border-radius:16px;border:none;background:linear-gradient(135deg,#4F7C82 0%,#3A6B70 100%);color:white;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.2,.8,.2,1);display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:1.5rem}
.mr-send-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(79,124,130,.3)}
.mr-send-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.mr-send-btn.sending{background:linear-gradient(135deg,#93B1B5 0%,#7A9EA3 100%)}
.mr-result{margin-top:1.25rem;padding:1.25rem;border-radius:16px;font-size:.85rem;line-height:1.6;animation:slideInUp .3s ease-out}
.mr-result.success{background:rgba(39,174,96,.06);border:1px solid rgba(39,174,96,.2);color:#1a5c34}
.mr-result.error{background:rgba(220,53,69,.06);border:1px solid rgba(220,53,69,.2);color:#8b1a1a}
.mr-result.info{background:rgba(79,124,130,.06);border:1px solid rgba(79,124,130,.15);color:var(--winter-dark)}
.mr-contacts-grid{display:grid;gap:.5rem;margin-top:.75rem}
.mr-contact-card{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.15rem;border-radius:16px;background:rgba(255,255,255,.8);border:1px solid rgba(79,124,130,.08);transition:all .2s}
.mr-contact-card:hover{background:#fff;box-shadow:0 4px 16px rgba(11,46,51,.06)}
.mr-contact-left{display:flex;align-items:center;gap:.75rem}
.mr-contact-avatar{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--winter-light),var(--winter-medium));display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:.8rem;flex-shrink:0}
.mr-contact-name{font-weight:600;font-size:.88rem;color:var(--winter-dark)}
.mr-contact-meta{font-size:.76rem;color:var(--apple-text-tertiary)}
.mr-contact-del{padding:.35rem .7rem;border-radius:10px;border:1px solid rgba(220,53,69,.15);background:transparent;font-size:.75rem;cursor:pointer;color:var(--status-red);transition:all .2s}
.mr-contact-del:hover{background:var(--status-red-bg)}
.mr-add-contact-row{display:flex;gap:.5rem;flex-wrap:wrap}
.mr-add-contact-row input{flex:1;min-width:120px;padding:.6rem .85rem;border-radius:12px;border:1.5px solid rgba(79,124,130,.15);font-size:.85rem;font-family:inherit;outline:none;box-sizing:border-box;background:rgba(255,255,255,.9)}
.mr-add-contact-row input:focus{border-color:var(--winter-medium)}
.mr-add-contact-btn{padding:.6rem 1.2rem;border-radius:12px;border:none;background:var(--winter-medium);color:white;font-size:.85rem;font-weight:600;cursor:pointer;white-space:nowrap}
@media(max-width:600px){.mr-main-tabs{flex-direction:column;gap:.5rem}.mr-add-contact-row{flex-direction:column}.mr-cc-row{flex-direction:column}}

/* ============================================== */
/* INLINE FORM PANELS - Winter Chill Apple Style  */
/* ============================================== */

.overlay-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(79, 124, 130, 0.2);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--winter-medium);
  font-size: 0;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(11, 46, 51, 0.06);
  margin-left: auto;
}

.overlay-add-btn:hover {
  background: linear-gradient(135deg, var(--winter-medium), var(--winter-dark));
  color: #fff;
  border-color: var(--winter-dark);
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(11, 46, 51, 0.2);
}

.overlay-add-btn:active {
  transform: scale(0.95);
}

.overlay-add-btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.overlay-add-btn.form-open svg {
  transform: rotate(45deg);
}

/* Form Panel */
.inline-form-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s ease,
              margin 0.4s ease,
              padding 0.4s ease;
  margin: 0;
  padding: 0 1.5rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid transparent;
}

.inline-form-panel.expanded {
  max-height: 1200px;
  opacity: 1;
  margin: 1.25rem 0;
  padding: 1.5rem;
  border-color: rgba(79, 124, 130, 0.15);
  box-shadow: 0 8px 32px rgba(11, 46, 51, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.inline-form-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--winter-dark);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: -0.02em;
}

.inline-form-title::before {
  content: '';
  width: 4px;
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--winter-medium), var(--winter-dark));
  flex-shrink: 0;
}

.inline-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 600px) {
  .inline-form-grid {
    grid-template-columns: 1fr;
  }
}

.inline-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.inline-form-field label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--apple-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.inline-form-field input,
.inline-form-field select,
.inline-form-field textarea {
  padding: 0.65rem 0.85rem;
  border: 1.5px solid rgba(79, 124, 130, 0.15);
  border-radius: 10px;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--apple-text-primary);
  background: rgba(255, 255, 255, 0.9);
  outline: none;
  transition: all 0.25s ease;
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
}

.inline-form-field input:focus,
.inline-form-field select:focus,
.inline-form-field textarea:focus {
  border-color: var(--winter-medium);
  box-shadow: 0 0 0 3px rgba(79, 124, 130, 0.1);
  background: #fff;
}

.inline-form-field input::placeholder {
  color: rgba(79, 124, 130, 0.35);
}

.inline-form-field textarea {
  resize: vertical;
  min-height: 52px;
}

.inline-form-field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234F7C82' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.inline-form-submit {
  margin-top: 1.25rem;
  width: 100%;
  padding: 0.85rem;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--winter-medium), var(--winter-dark));
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: -0.01em;
  position: relative;
  overflow: hidden;
}

.inline-form-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(11, 46, 51, 0.25);
}

.inline-form-submit:active {
  transform: translateY(0) scale(0.99);
}

.inline-form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.inline-form-submit.sending {
  background: var(--winter-light);
}

/* Success/Error toast */
.inline-form-toast {
  margin-top: 0.75rem;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 500;
  display: none;
  align-items: center;
  gap: 0.5rem;
  animation: slideInUp 0.3s ease;
}

.inline-form-toast.success {
  display: flex;
  background: var(--status-green-bg);
  border: 1px solid var(--status-green-border);
  color: var(--status-green);
}

.inline-form-toast.error {
  display: flex;
  background: var(--status-red-bg);
  border: 1px solid var(--status-red-border);
  color: var(--status-red);
}

/* ============================================== */
/* ACTION ROW EDIT/DELETE - Apple Style            */
/* ============================================== */

.action-row-ops {
  display: flex;
  gap: 0.35rem;
  justify-content: center;
}

.action-row-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  background: transparent;
}

.action-row-btn svg {
  width: 15px;
  height: 15px;
}

.action-row-btn.edit-btn {
  color: var(--winter-medium);
}

.action-row-btn.edit-btn:hover {
  background: rgba(79, 124, 130, 0.12);
  color: var(--winter-dark);
  transform: scale(1.1);
}

.action-row-btn.del-btn {
  color: rgba(220, 53, 69, 0.5);
}

.action-row-btn.del-btn:hover {
  background: rgba(220, 53, 69, 0.1);
  color: var(--status-red);
  transform: scale(1.1);
}

/* ============================================== */
/* EDIT MODAL - Frosted Glass Apple Style          */
/* ============================================== */

.crud-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(11, 46, 51, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: crudFadeIn 0.25s ease;
  padding: 1rem;
}

.crud-modal-overlay.visible {
  display: flex;
}

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

@keyframes crudSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.crud-modal {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid rgba(79, 124, 130, 0.12);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(11, 46, 51, 0.2),
              0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  width: 94%;
  max-width: 940px;
  max-height: 92vh;
  overflow-y: auto;
  animation: crudSlideUp 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

.crud-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid rgba(79, 124, 130, 0.08);
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px 20px 0 0;
  z-index: 1;
}

.crud-modal-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--winter-dark);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.crud-modal-title .crud-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.7rem;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--winter-medium), var(--winter-dark));
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.crud-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(79, 124, 130, 0.08);
  color: var(--apple-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.crud-modal-close:hover {
  background: rgba(220, 53, 69, 0.1);
  color: var(--status-red);
  transform: scale(1.1);
}

.crud-modal-close svg {
  width: 18px;
  height: 18px;
}

.crud-modal-body {
  padding: 2rem;
}

.crud-modal-body .inline-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.35rem;
}

.crud-modal-body .inline-form-field label {
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.crud-modal-body .inline-form-field input,
.crud-modal-body .inline-form-field select,
.crud-modal-body .inline-form-field textarea {
  font-size: 0.95rem;
  padding: 0.85rem 1rem;
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
}

.crud-modal-body .inline-form-field textarea {
  min-height: 120px;
  resize: vertical;
}

@media (max-width: 700px) {
  .crud-modal-body .inline-form-grid {
    grid-template-columns: 1fr;
  }
  .crud-modal {
    width: 98%;
  }
}

.crud-modal-actions {
  display: flex;
  gap: 0.85rem;
  padding: 1.5rem 2rem;
  border-top: 1px solid rgba(79, 124, 130, 0.08);
  position: sticky;
  bottom: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 0 0 20px 20px;
}

.crud-btn {
  flex: 1;
  padding: 0.75rem;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.25s ease;
  border: none;
  letter-spacing: -0.01em;
}

.crud-btn.save {
  background: linear-gradient(135deg, var(--winter-medium), var(--winter-dark));
  color: #fff;
}

.crud-btn.save:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(11, 46, 51, 0.25);
}

.crud-btn.save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.crud-btn.cancel {
  background: rgba(79, 124, 130, 0.08);
  color: var(--apple-text-secondary);
  border: 1px solid rgba(79, 124, 130, 0.12);
}

.crud-btn.cancel:hover {
  background: rgba(79, 124, 130, 0.15);
}

/* Delete confirm inline */
.crud-del-confirm {
  display: none;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: var(--status-red-bg);
  border: 1px solid var(--status-red-border);
  margin-top: 0.75rem;
}

.crud-del-confirm.visible {
  display: flex;
}

.crud-del-confirm p {
  flex: 1;
  font-size: 0.8rem;
  color: var(--status-red);
  font-weight: 500;
  margin: 0;
}

.crud-del-yes {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: none;
  background: var(--status-red);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.crud-del-yes:hover {
  opacity: 0.85;
}

.crud-del-no {
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  border: 1px solid rgba(220, 53, 69, 0.2);
  background: transparent;
  color: var(--status-red);
  font-size: 0.8rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.crud-del-no:hover {
  background: rgba(220, 53, 69, 0.05);
}

.crud-toast {
  margin-top: 0.75rem;
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 500;
  display: none;
}

.crud-toast.success {
  display: block;
  background: var(--status-green-bg);
  border: 1px solid var(--status-green-border);
  color: var(--status-green);
}

.crud-toast.error {
  display: block;
  background: var(--status-red-bg);
  border: 1px solid var(--status-red-border);
  color: var(--status-red);
}


/* ==================== 7. blok (orijinal sətir 38306) ==================== */
/* Remove fixed positioning and internal scroll for overlay components to ensure single scroll bar */
    /*
      To ensure only a single scrollbar is visible, we override the default
      fixed positioning and internal scrolling on most overlays.  However,
      the PT incident list overlay still needs to cover the screen and
      remain fixed so clicking the level badges triggers a visible page
      transition.  Removing the fixed positioning from the PT overlay
      caused the list to render far down the page, making it appear as
      though nothing happened when clicking the level badges.  Therefore
      exclude `.pt-overlay` from this rule.
    */
    /*
      Only the PAO overlay should behave like regular page content.  PT
      action lists, MOC action lists and PSSR overlays require fixed
      positioning to function correctly (they should float above the page
      and lock the body scroll).  We therefore remove them from this
      override and leave their default styles intact.  Keeping
      `.pao-overlay` here ensures the PAO overlay still expands like
      normal content.
    */
    /* ÇIXARILDI: Bu override .pao-overlay-i `position: static` etməklə overlay-in
       görünməməsinə səbəb olurdu. Orijinal davranış (position: fixed, ekrana
       tam ört) bərpa edildi.
    .pao-overlay {
      position: static !important;
      overflow-y: visible !important;
      height: auto !important;
      width: 100% !important;
    }
    */

    /*
      Disable the override of the body scroll lock.  The original app uses
      `lockBodyScroll()` to fix the body in place when an overlay opens.
      This prevents the background page from scrolling and ensures a
      consistent single-scroll experience inside the overlay.  Overriding
      this behaviour caused the PT overlay to behave like regular page
      content, so we revert the change here.
    */
    /* body.overlay-open, html.overlay-open-html {
      position: static !important;
      overflow: auto !important;
      width: auto !important;
      top: auto !important;
    } */

    /* Make overlay pages span full width and remove side margins */
    /*
      Constrain the PAO content to span the full width of the viewport.
      Other overlay content types (PT action lists, MOC action lists,
      PSSR overlays and mtd pages) retain their default margins and
      padding so they can be aligned individually later.  Applying this
      rule only to `.pao-content` prevents accidental removal of margins
      on other overlays which could lead to double scroll bars or
      misalignment.
    */
    .pao-content {
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 1rem !important;
      padding-right: 1rem !important;
      max-width: 100% !important;
    }

    /*
      Adjust horizontal padding and max-width for PT list page to align with
      the baypasetmə table list design.  We increase left/right padding to
      approximately 2.5rem (about 40px) and optionally constrain the
      container width to 1600px centered.  This gives the PT list page a
      similar margin and breathing room as the Baypasetmə page.
    */
    .pt-overlay-content {
      max-width: 1600px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding: 2rem 2.5rem 4rem !important;
    }

    /* No override for PSSR overlay content: retain the original layout
       defined in the base styles so the PSSR page remains unchanged.
       We only adjust the PT overlay to mirror the Baypasetmə design. */

    /* Compact styling for PT list view (pt-overlay) */
    .pt-overlay-title h2 {
      font-size: 1rem !important;
      /* Increase spacing below the page title to mirror Baypasetmə layout */
      margin-bottom: 0.8rem !important;
    }
    .pt-level-badge {
      /* Make the PTTEH badge more prominent */
      font-size: 0.8rem !important;
      padding: 0.4rem 0.9rem !important;
      border-radius: 16px !important;
    }
    .pt-back-btn {
      /* Enlarge PT list back button to match Baypasetmə design */
      font-size: 0.8rem !important;
      padding: 0.6rem 1.1rem !important;
      border-radius: 10px !important;
    }
    .pt-back-btn svg {
      width: 16px !important;
      height: 16px !important;
    }
    .pt-stats-grid {
      /* Slightly larger gaps and bottom margin for a more airy feel */
      gap: 0.7rem !important;
      margin-bottom: 1.2rem !important;
    }
    .pt-stat-card {
      padding: 0.6rem 1rem !important;
      border-radius: 10px !important;
      min-width: 100px !important;
      gap: 0.25rem !important;
    }
    .pt-stat-value {
      /* Increase statistic number size for improved legibility */
      font-size: 1.5rem !important;
    }
    .pt-stat-label {
      font-size: 0.5rem !important;
    }
    .pt-filter-name {
      font-size: 0.75rem !important;
    }
    .pt-filter-count {
      min-width: 24px !important;
      height: 20px !important;
      font-size: 0.6rem !important;
    }

    /* Additional compact styling for PT incident detail page */
    #ptIncidentPageOverlay .mtd-page {
      /*
        Increase padding to better mirror the Fəaliyyət (DİO) detail page layout.
        Top padding of 1.5rem, horizontal padding of 2rem and bottom padding
        of 3rem provides a comfortable margin for the hero section, info grid
        and subsequent cards while keeping the compact aesthetic.
      */
      padding: 1.5rem 2rem 3rem !important;
    }
    #ptIncidentPageOverlay .mtd-topbar {
      margin-bottom: 0.5rem !important;
      padding: 0 !important;
    }
    #ptIncidentPageOverlay .mtd-hero {
      margin-bottom: 0.8rem !important;
    }
    #ptIncidentPageOverlay .mtd-hero-cat {
      font-size: 0.5rem !important;
      padding: 0.2rem 0.5rem 0.2rem 0.35rem !important;
      border-radius: 5px !important;
    }
    #ptIncidentPageOverlay .mtd-hero-cat svg {
      width: 8px !important;
      height: 8px !important;
    }
    #ptIncidentPageOverlay .mtd-hero-title {
      font-size: 1.1rem !important;
      margin-bottom: 0.5rem !important;
      line-height: 1.2 !important;
      font-weight: 700 !important;
    }
    #ptIncidentPageOverlay .mtd-hero-chip {
      font-size: 0.6rem !important;
      padding: 0.25rem 0.55rem !important;
    }
    #ptIncidentPageOverlay .mtd-hero-chip svg {
      width: 9px !important;
      height: 9px !important;
    }
    #ptIncidentPageOverlay .mtd-info-card {
      padding: 0.3rem !important;
      border-radius: 10px !important;
      margin-bottom: 0.6rem !important;
    }
    #ptIncidentPageOverlay .mtd-info-grid {
      gap: 0.3rem !important;
    }
    #ptIncidentPageOverlay .mtd-info-cell {
      padding: 0.5rem 0.6rem !important;
      border-radius: 7px !important;
      gap: 0.4rem !important;
    }
    #ptIncidentPageOverlay .mtd-info-cell-icon {
      width: 22px !important;
      height: 22px !important;
      border-radius: 6px !important;
    }
    #ptIncidentPageOverlay .mtd-info-cell-icon svg {
      width: 11px !important;
      height: 11px !important;
    }
    #ptIncidentPageOverlay .mtd-info-label {
      font-size: 0.5rem !important;
      margin-bottom: 0.1rem !important;
    }
    #ptIncidentPageOverlay .mtd-info-value {
      font-size: 0.62rem !important;
    }
    #ptIncidentPageOverlay .mtd-section {
      padding: 0.6rem 0.8rem !important;
      border-radius: 10px !important;
      margin-bottom: 0.5rem !important;
    }
    #ptIncidentPageOverlay .mtd-section-heading-wrap {
      margin-bottom: 0.5rem !important;
    }
    #ptIncidentPageOverlay .mtd-section-heading {
      font-size: 0.7rem !important;
    }
    #ptIncidentPageOverlay .mtd-section-sub {
      font-size: 0.6rem !important;
    }
    #ptIncidentPageOverlay .mtd-back-btn {
      /* Enlarge back button in PT incident detail for better visibility */
      padding: 0.5rem 0.9rem !important;
      font-size: 0.75rem !important;
    }
    #ptIncidentPageOverlay .mtd-back-btn svg {
      width: 16px !important;
      height: 16px !important;
    }
    #ptIncidentPageOverlay .mtd-crumb-pill {
      padding: 0.25rem 0.55rem 0.25rem 0.4rem !important;
      font-size: 0.55rem !important;
    }
    #ptIncidentPageOverlay .mtd-crumb-pill svg {
      width: 9px !important;
      height: 9px !important;
    }

    /* Compact PT incident document cards */
    #ptIncidentPageOverlay .pt-incident-doc-card {
      border-radius: 10px !important;
      padding: 0.6rem 0.8rem !important;
    }
    #ptIncidentPageOverlay .pt-incident-doc-icon-wrap svg {
      width: 12px !important;
      height: 12px !important;
    }
    #ptIncidentPageOverlay .pt-incident-doc-eyebrow {
      font-size: 0.55rem !important;
      margin-bottom: 0.1rem !important;
    }
    #ptIncidentPageOverlay .pt-incident-doc-name {
      font-size: 0.65rem !important;
    }
    #ptIncidentPageOverlay .pt-incident-doc-btn {
      padding: 0.3rem 0.5rem !important;
      font-size: 0.6rem !important;
      border-radius: 8px !important;
    }
    #ptIncidentPageOverlay .pt-incident-doc-btn svg {
      width: 9px !important;
      height: 9px !important;
    }

    /* Compact PT incident activity cards */
    #ptIncidentPageOverlay .pt-incident-activities-grid {
      gap: 0.5rem !important;
    }
    #ptIncidentPageOverlay .pt-incident-activity-card {
      padding: 0.5rem 0.6rem !important;
      border-radius: 10px !important;
    }
    #ptIncidentPageOverlay .pt-incident-activity-icon svg {
      width: 12px !important;
      height: 12px !important;
    }
    #ptIncidentPageOverlay .pt-incident-activity-label {
      font-size: 0.6rem !important;
    }
    #ptIncidentPageOverlay .pt-incident-activity-count-num {
      /* Larger number for ongoing/completed counts */
      font-size: 1.4rem !important;
    }
    #ptIncidentPageOverlay .pt-incident-activity-count-suffix {
      /* Slightly larger suffix to maintain proportion */
      font-size: 0.8rem !important;
    }

    /* Ensure charts and diagrams shrink appropriately */
    #ptIncidentPageOverlay .pt-incident-causes-diagram-wrap {
      max-width: 100% !important;
    }

    /*
      Revised styling for PT Incident detail page to better mirror the
      Fəaliyyət (DİO) tracking page.  These rules override the previous
      compact overrides and restore more comfortable spacing, larger
      typography and appropriate card sizes while still maintaining a
      modern, streamlined appearance.
    */
    #ptIncidentPageOverlay .mtd-topbar {
      margin-bottom: 1rem !important;
      padding: 0.25rem 0 !important;
    }
    #ptIncidentPageOverlay .mtd-hero-cat {
      font-size: 0.65rem !important;
      padding: 0.22rem 0.6rem 0.22rem 0.42rem !important;
      border-radius: 6px !important;
    }
    #ptIncidentPageOverlay .mtd-hero-title {
      font-size: 1.4rem !important;
      margin-bottom: 0.6rem !important;
      line-height: 1.25 !important;
      font-weight: 700 !important;
    }
    #ptIncidentPageOverlay .mtd-hero-chip {
      font-size: 0.7rem !important;
      padding: 0.3rem 0.65rem !important;
    }
    /* Info grid spacing and cell sizing */
    #ptIncidentPageOverlay .mtd-info-card {
      padding: 0 !important;
      border: none !important;
      margin-bottom: 1.25rem !important;
    }
    #ptIncidentPageOverlay .mtd-info-grid {
      gap: 0.85rem !important;
    }
    #ptIncidentPageOverlay .mtd-info-cell {
      padding: 0.7rem !important;
      border-radius: 14px !important;
      gap: 0.45rem !important;
    }
    #ptIncidentPageOverlay .mtd-info-cell-icon {
      display: none !important;
    }
    #ptIncidentPageOverlay .mtd-info-label {
      font-size: 0.625rem !important;
    }
    #ptIncidentPageOverlay .mtd-info-value {
      font-size: 1.05rem !important;
    }
    /* Section cards */
    #ptIncidentPageOverlay .mtd-section {
      padding: 0.8rem 1rem !important;
      border-radius: 14px !important;
      margin-bottom: 1rem !important;
    }
    #ptIncidentPageOverlay .mtd-section-heading {
      font-size: 0.75rem !important;
    }
    #ptIncidentPageOverlay .mtd-section-sub {
      font-size: 0.65rem !important;
    }
    #ptIncidentPageOverlay .mtd-back-btn {
      padding: 0.6rem 1rem !important;
      font-size: 0.8rem !important;
    }
    #ptIncidentPageOverlay .mtd-crumb-pill {
      padding: 0.35rem 0.8rem 0.35rem 0.5rem !important;
      font-size: 0.65rem !important;
    }
    /* Document cards */
    #ptIncidentPageOverlay .pt-incident-doc-card {
      border-radius: 12px !important;
      padding: 0.8rem 1rem !important;
    }
    #ptIncidentPageOverlay .pt-incident-doc-icon-wrap svg {
      width: 14px !important;
      height: 14px !important;
    }
    #ptIncidentPageOverlay .pt-incident-doc-eyebrow {
      font-size: 0.6rem !important;
      margin-bottom: 0.15rem !important;
    }
    #ptIncidentPageOverlay .pt-incident-doc-name {
      font-size: 0.7rem !important;
    }
    #ptIncidentPageOverlay .pt-incident-doc-btn {
      padding: 0.4rem 0.6rem !important;
      font-size: 0.7rem !important;
      border-radius: 10px !important;
    }
    #ptIncidentPageOverlay .pt-incident-doc-btn svg {
      width: 10px !important;
      height: 10px !important;
    }
    /* Activity cards */
    #ptIncidentPageOverlay .pt-incident-activities-grid {
      gap: 0.85rem !important;
    }
    #ptIncidentPageOverlay .pt-incident-activity-card {
      padding: 0.7rem 0.8rem !important;
      border-radius: 12px !important;
    }
    #ptIncidentPageOverlay .pt-incident-activity-icon svg {
      width: 14px !important;
      height: 14px !important;
    }
    #ptIncidentPageOverlay .pt-incident-activity-label {
      font-size: 0.65rem !important;
    }
    #ptIncidentPageOverlay .pt-incident-activity-count-num {
      font-size: 1.4rem !important;
    }
    #ptIncidentPageOverlay .pt-incident-activity-count-suffix {
      font-size: 0.8rem !important;
    }

    /*
      PT list colours and sizing adjustments to mirror the Baypasetmə page.
      - Status chips: ongoing (İcradadır) should be red; completed (Bitib) should be green.
      - Stat cards: update gradient and number colour accordingly.
      - Modal status: align colours with chips.
      - Increase PT page title font size to match Baypasetmə.
      - Scale up the PT preview cards (incident cards) to have similar
        padding, font sizes and border accent width as PSSR/MOC cards.
      - Restore internal scroll for PT cards container so long lists can
        scroll within the overlay, just like Baypasetmə.
    */
    /* Status chip colours */
    .pt-status-chip.ongoing {
      background: rgba(196, 92, 92, 0.15) !important;
      color: var(--apple-red) !important;
    }
    .pt-status-chip.completed {
      background: rgba(58, 107, 112, 0.15) !important;
      color: var(--apple-green) !important;
    }
    /* Modal status colours */
    .pt-modal-status.ongoing {
      background: var(--apple-red) !important;
      color: #FFFFFF !important;
    }
    .pt-modal-status.completed {
      background: var(--apple-green) !important;
      color: #FFFFFF !important;
    }
    /* Stat card colours */
    .pt-stat-card.ongoing {
      background: linear-gradient(135deg, rgba(196, 92, 92, 0.15), rgba(196, 92, 92, 0.05)) !important;
      border-color: rgba(196, 92, 92, 0.3) !important;
    }
    .pt-stat-card.ongoing .pt-stat-value {
      color: var(--apple-red) !important;
    }
    .pt-stat-card.completed {
      background: linear-gradient(135deg, rgba(58, 107, 112, 0.15), rgba(58, 107, 112, 0.05)) !important;
      border-color: rgba(58, 107, 112, 0.3) !important;
    }
    .pt-stat-card.completed .pt-stat-value {
      color: var(--apple-green) !important;
    }
    /* PT page title */
    .pt-overlay-title h2 {
      font-size: 1.75rem !important;
      font-weight: 700 !important;
      color: var(--winter-dark) !important;
      margin: 0 !important;
    }
    /* PT preview card sizing and accent */
    .pt-preview-card {
      padding: 1rem 1.25rem !important;
      border-left-width: 4px !important;
    }
    .pt-preview-left {
      min-width: 90px !important;
      padding: 0.5rem 0.8rem !important;
    }
    .pt-preview-date {
      font-size: 0.85rem !important;
    }
    .pt-preview-title {
      font-size: 0.95rem !important;
    }
    .pt-meta-chip {
      font-size: 0.7rem !important;
      padding: 0.25rem 0.6rem !important;
    }
    /* PT cards container scroll and padding */
    .pt-cards-container {
      max-height: calc(100vh - 380px) !important;
      overflow-y: auto !important;
      padding: 0.5rem !important;
    }

    /* PT Filters Row Styles
       Replicate the Baypasetmə/PSSR filter row for the PT incident list.  This row
       sits below the stats grid and contains two select inputs: one for
       filtering by "Sahə" (area) and another for filtering by "Məsul şəxs"
       (responsible person).  The styles below are adapted from the
       corresponding .pssr-filters-row and .pssr-filter-chip rules.
    */
    .pt-filters-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      padding: 1rem;
      background: #FFFFFF;
      border: 1px solid rgba(79, 124, 130, 0.12);
      border-radius: 12px;
      margin-bottom: 1rem;
    }
    .pt-filter-chip {
      position: relative;
    }
    .pt-filter-chip select {
      appearance: none;
      background: rgba(79, 124, 130, 0.06);
      border: 1px solid rgba(79, 124, 130, 0.15);
      border-radius: 20px;
      padding: 0.5rem 2rem 0.5rem 1rem;
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--winter-dark);
      cursor: pointer;
      transition: all 0.2s ease;
      min-width: 150px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234F7C82' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.75rem center;
    }
    .pt-filter-chip select:hover {
      border-color: var(--winter-medium);
      background-color: rgba(79, 124, 130, 0.1);
    }
    .pt-filter-chip select:focus {
      outline: none;
      border-color: var(--winter-medium);
      box-shadow: 0 0 0 3px rgba(79, 124, 130, 0.15);
    }


/* ==================== 8. blok — PFI modulu silindiyi üçün çıxarılıb ==================== */
/* ==================== 9. blok (orijinal sətir 41062) ==================== */
@keyframes bulSlideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes bulScaleIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
@keyframes bulShimmer{0%{background-position:-500px 0}100%{background-position:500px 0}}

.bul-overlay{position:fixed;inset:0;background:linear-gradient(180deg,#F4FAFB 0%,#E8F4F5 50%,#F4FAFB 100%);z-index:10001;overflow-y:auto;overflow-x:hidden;display:none;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease}
.bul-overlay.visible{display:block;opacity:1;visibility:visible}
.bul-pw{width:100%;min-height:100vh;padding:0 0 4rem}
.bul-nav{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.85);backdrop-filter:blur(28px) saturate(200%);-webkit-backdrop-filter:blur(28px) saturate(200%);padding:.85rem 2rem;border-bottom:1px solid rgba(79,124,130,.08);box-shadow:0 1px 16px rgba(11,46,51,.05);display:flex;align-items:center;gap:.85rem}
.bul-nb{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.75);border:1px solid rgba(79,124,130,.1);border-radius:12px;cursor:pointer;color:var(--winter-medium);flex-shrink:0;transition:all .25s cubic-bezier(.2,.8,.2,1)}
.bul-nb:hover{background:#fff;border-color:var(--winter-medium);transform:scale(1.06);box-shadow:0 4px 14px rgba(79,124,130,.15)}
.bul-nb svg{width:17px;height:17px}
.bul-nt{font-size:1.2rem;font-weight:700;color:var(--winter-dark);letter-spacing:-.025em}
.bul-bc{display:flex;align-items:center;gap:.35rem;margin-left:auto;font-size:.75rem;color:var(--apple-text-tertiary)}
.bul-v{display:none;padding:2rem 2.5rem;animation:bulScaleIn .4s cubic-bezier(.32,.72,0,1) both}
.bul-v.active{display:block}
@media(max-width:768px){.bul-v{padding:1.25rem 1rem}.bul-nav{padding:.75rem 1rem}}

/* ── Başlıq zolağı ─────────────────────────────────────────── */
.bul-hd{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.bul-hd-ic{width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,rgba(79,124,130,.12),rgba(147,177,181,.18));border:1px solid rgba(79,124,130,.12);display:flex;align-items:center;justify-content:center;color:var(--winter-medium);flex-shrink:0}
.bul-hd-ic svg{width:26px;height:26px}
.bul-hd-t{font-size:1.85rem;font-weight:800;letter-spacing:-.035em;color:var(--winter-dark);line-height:1.15}
.bul-hd-s{font-size:.85rem;color:var(--apple-text-secondary);margin-top:.25rem}
.bul-hd-r{margin-left:auto;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}

.bul-search{position:relative;min-width:280px}
.bul-search svg{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--apple-text-tertiary);opacity:.6;pointer-events:none}
.bul-search input{width:100%;padding:.7rem 1rem .7rem 2.5rem;border-radius:14px;border:1.5px solid rgba(79,124,130,.1);background:rgba(255,255,255,.9);font-family:inherit;font-size:.85rem;color:var(--winter-dark);transition:all .25s;outline:none}
.bul-search input:focus{border-color:var(--winter-medium);background:#fff;box-shadow:0 4px 18px rgba(79,124,130,.1)}
.bul-fsel{padding:.7rem 2rem .7rem .9rem;border-radius:14px;border:1.5px solid rgba(79,124,130,.1);background:rgba(255,255,255,.9) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F7C82' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right .7rem center/14px;font-family:inherit;font-size:.82rem;font-weight:600;color:var(--winter-dark);cursor:pointer;appearance:none;-webkit-appearance:none;outline:none;transition:all .25s}
.bul-fsel:hover{border-color:rgba(79,124,130,.25)}
.bul-fsel:focus{border-color:var(--winter-medium);box-shadow:0 4px 18px rgba(79,124,130,.1)}

.bul-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.7rem 1.15rem;border-radius:14px;border:none;background:var(--winter-dark);color:#fff;font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;transition:all .25s cubic-bezier(.2,.8,.2,1);box-shadow:0 4px 16px rgba(11,46,51,.18)}
.bul-btn:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(11,46,51,.24)}
.bul-btn svg{width:16px;height:16px}
.bul-btn.ghost{background:rgba(255,255,255,.9);color:var(--winter-dark);border:1.5px solid rgba(79,124,130,.12);box-shadow:none}
.bul-btn.ghost:hover{background:#fff;border-color:var(--winter-medium);box-shadow:0 6px 20px rgba(79,124,130,.12)}
.bul-btn.danger{background:rgba(214,69,69,.08);color:#C0392B;border:1.5px solid rgba(214,69,69,.18);box-shadow:none}
.bul-btn.danger:hover{background:rgba(214,69,69,.14)}

/* ── Cədvəl ────────────────────────────────────────────────── */
.bul-card{background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border:1px solid rgba(79,124,130,.08);border-radius:24px;box-shadow:0 4px 32px rgba(11,46,51,.05);overflow:hidden}
.bul-tbl{width:100%;border-collapse:collapse}
.bul-tbl thead th{text-align:left;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--apple-text-tertiary);padding:1rem 1.25rem;border-bottom:1px solid rgba(79,124,130,.08);white-space:nowrap;background:rgba(244,250,251,.6)}
.bul-tbl thead th.sortable{cursor:pointer;user-select:none;transition:color .2s}
.bul-tbl thead th.sortable:hover{color:var(--winter-dark)}
.bul-tbl thead th svg{width:12px;height:12px;vertical-align:-1px;margin-left:.25rem;opacity:.5}
.bul-tbl tbody tr{border-bottom:1px solid rgba(79,124,130,.06);cursor:pointer;transition:background .18s}
.bul-tbl tbody tr:last-child{border-bottom:none}
.bul-tbl tbody tr:hover{background:rgba(79,124,130,.035)}
.bul-tbl td{padding:1rem 1.25rem;vertical-align:middle}
.bul-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bul-ic svg{width:19px;height:19px}
.bul-ic.blue{background:rgba(84,110,201,.1);color:#546EC9}
.bul-ic.green{background:rgba(52,158,110,.1);color:#349E6E}
.bul-ic.purple{background:rgba(139,95,191,.1);color:#8B5FBF}
.bul-ic.orange{background:rgba(214,133,52,.11);color:#D68534}
.bul-ic.teal{background:rgba(79,124,130,.12);color:#4F7C82}
.bul-ic.neutral{background:rgba(79,124,130,.07);color:var(--winter-light)}
.bul-no{font-size:.82rem;font-weight:700;color:var(--apple-text-secondary);white-space:nowrap;font-variant-numeric:tabular-nums}
.bul-ti{font-size:.92rem;font-weight:700;color:var(--winter-dark);letter-spacing:-.015em}
.bul-su{font-size:.78rem;color:var(--apple-text-tertiary);margin-top:.2rem}
.bul-dt{font-size:.85rem;font-weight:600;color:var(--winter-dark);white-space:nowrap;font-variant-numeric:tabular-nums}
.bul-tm{font-size:.75rem;color:var(--apple-text-tertiary);margin-top:.15rem;font-variant-numeric:tabular-nums}
.bul-pill{display:inline-flex;align-items:center;padding:.2rem .55rem;border-radius:7px;font-size:.68rem;font-weight:700;background:rgba(79,124,130,.08);color:var(--winter-medium)}
.bul-pill.draft{background:rgba(214,133,52,.12);color:#B06C1F}
.bul-ra{display:flex;gap:.35rem;justify-content:flex-end;opacity:0;transition:opacity .2s}
.bul-tbl tbody tr:hover .bul-ra{opacity:1}
.bul-ra button{width:32px;height:32px;border-radius:10px;border:1px solid rgba(79,124,130,.1);background:rgba(255,255,255,.9);color:var(--apple-text-tertiary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.bul-ra button:hover{color:var(--winter-dark);border-color:var(--winter-medium);transform:scale(1.06)}
.bul-ra button.del:hover{color:#C0392B;border-color:rgba(214,69,69,.35)}
.bul-ra svg{width:15px;height:15px}

.bul-ft{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;border-top:1px solid rgba(79,124,130,.08);background:rgba(244,250,251,.5);flex-wrap:wrap}
.bul-ft-c{font-size:.8rem;color:var(--apple-text-secondary);font-weight:600}
.bul-pg{margin-left:auto;display:flex;align-items:center;gap:.35rem}
.bul-pg button{min-width:34px;height:34px;padding:0 .5rem;border-radius:10px;border:1px solid rgba(79,124,130,.1);background:rgba(255,255,255,.9);color:var(--apple-text-secondary);font-family:inherit;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}
.bul-pg button:hover:not(:disabled){border-color:var(--winter-medium);color:var(--winter-dark)}
.bul-pg button.active{background:var(--winter-dark);color:#fff;border-color:var(--winter-dark)}
.bul-pg button:disabled{opacity:.35;cursor:not-allowed}
.bul-pg svg{width:14px;height:14px}

.bul-empty{padding:4rem 2rem;text-align:center}
.bul-empty svg{width:44px;height:44px;color:var(--winter-light);opacity:.5;margin-bottom:.85rem}
.bul-empty-t{font-size:.95rem;font-weight:700;color:var(--winter-dark)}
.bul-empty-s{font-size:.82rem;color:var(--apple-text-tertiary);margin-top:.3rem}
.bul-skel{height:64px;border-bottom:1px solid rgba(79,124,130,.06);background:linear-gradient(90deg,rgba(79,124,130,.04) 25%,rgba(79,124,130,.09) 37%,rgba(79,124,130,.04) 63%);background-size:900px 100%;animation:bulShimmer 1.3s linear infinite}

/* ── Detal səhifəsi ────────────────────────────────────────── */
.bul-dtop{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;flex-wrap:wrap}
.bul-back{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.1rem;border-radius:14px;border:1px solid rgba(79,124,130,.1);background:rgba(255,255,255,.9);font-family:inherit;font-size:.82rem;font-weight:600;color:var(--winter-dark);cursor:pointer;transition:all .25s}
.bul-back:hover{background:#fff;border-color:var(--winter-medium);transform:translateX(-2px)}
.bul-back svg{width:15px;height:15px}
.bul-dact{margin-left:auto;display:flex;gap:.55rem}

.bul-dhd{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.5rem}
.bul-dhd-ic{width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bul-dhd-ic svg{width:28px;height:28px}
.bul-dtag{display:inline-flex;align-items:center;padding:.22rem .6rem;border-radius:8px;background:rgba(79,124,130,.08);border:1px solid rgba(79,124,130,.12);font-size:.72rem;font-weight:700;color:var(--winter-medium);font-variant-numeric:tabular-nums;margin-bottom:.5rem}
.bul-dt-t{font-size:1.75rem;font-weight:800;letter-spacing:-.035em;color:var(--winter-dark);line-height:1.15}
.bul-dt-s{font-size:.88rem;color:var(--apple-text-secondary);margin-top:.35rem}

.bul-dgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1.5rem;align-items:start}
@media(max-width:1100px){.bul-dgrid{grid-template-columns:minmax(0,1fr)}}
.bul-frame{position:relative;background:#fff;border:1px solid rgba(79,124,130,.08);border-radius:24px;box-shadow:0 4px 32px rgba(11,46,51,.05);overflow:hidden;height:calc(100vh - 300px);min-height:560px}
.bul-frame iframe{width:100%;height:100%;border:0;display:block;background:#F4FAFB}
.bul-fload{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;background:rgba(255,255,255,.96);z-index:2;transition:opacity .3s}
.bul-fload.hidden{opacity:0;pointer-events:none}
.bul-spin{width:30px;height:30px;border:2.5px solid rgba(79,124,130,.15);border-top-color:var(--winter-medium);border-radius:50%;animation:bulSpin .8s linear infinite}
@keyframes bulSpin{to{transform:rotate(360deg)}}
.bul-fload span{font-size:.8rem;color:var(--apple-text-tertiary);font-weight:600}
.bul-fb{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;padding:0 2rem}
.bul-fb .bul-btn{margin-top:.9rem}

.bul-side{display:flex;flex-direction:column;gap:1rem}
.bul-panel{background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border:1px solid rgba(79,124,130,.08);border-radius:22px;box-shadow:0 4px 24px rgba(11,46,51,.04);padding:1.35rem 1.5rem}
.bul-panel h4{font-size:.95rem;font-weight:800;color:var(--winter-dark);letter-spacing:-.02em;margin:0 0 1rem}
.bul-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid rgba(79,124,130,.06)}
.bul-row:last-child{border-bottom:none;padding-bottom:0}
.bul-row-k{font-size:.8rem;color:var(--apple-text-tertiary);font-weight:600;flex-shrink:0}
.bul-row-v{font-size:.82rem;color:var(--winter-dark);font-weight:700;text-align:right}
.bul-desc{font-size:.84rem;line-height:1.6;color:var(--apple-text-secondary)}

/* ── Modal ─────────────────────────────────────────────────── */
.bul-mo{position:fixed;inset:0;background:rgba(11,46,51,.35);backdrop-filter:blur(6px);z-index:10050;display:none;align-items:center;justify-content:center;padding:2rem;opacity:0;transition:opacity .25s}
.bul-mo.visible{display:flex;opacity:1}
.bul-mc{width:100%;max-width:640px;max-height:88vh;overflow-y:auto;background:#fff;border-radius:26px;box-shadow:0 24px 80px rgba(11,46,51,.28);animation:bulSlideUp .3s cubic-bezier(.32,.72,0,1) both}
.bul-mh{position:sticky;top:0;background:#fff;padding:1.5rem 1.75rem 1rem;border-bottom:1px solid rgba(79,124,130,.08);display:flex;align-items:center;gap:.75rem;z-index:2}
.bul-mh h3{margin:0;font-size:1.1rem;font-weight:800;color:var(--winter-dark);letter-spacing:-.025em}
.bul-mx{margin-left:auto;width:34px;height:34px;border-radius:11px;border:1px solid rgba(79,124,130,.1);background:#fff;color:var(--apple-text-tertiary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.bul-mx:hover{color:var(--winter-dark);border-color:var(--winter-medium)}
.bul-mx svg{width:15px;height:15px}
.bul-mb{padding:1.5rem 1.75rem}
.bul-fg{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.bul-f{display:flex;flex-direction:column;gap:.4rem}
.bul-f.full{grid-column:1/-1}
.bul-f label{font-size:.75rem;font-weight:700;color:var(--apple-text-secondary);letter-spacing:.01em}
.bul-f input,.bul-f textarea,.bul-f select{width:100%;padding:.7rem .85rem;border-radius:13px;border:1.5px solid rgba(79,124,130,.12);background:rgba(244,250,251,.5);font-family:inherit;font-size:.85rem;color:var(--winter-dark);outline:none;transition:all .2s}
.bul-f input:focus,.bul-f textarea:focus,.bul-f select:focus{border-color:var(--winter-medium);background:#fff;box-shadow:0 4px 16px rgba(79,124,130,.08)}
.bul-f textarea{resize:vertical;min-height:82px;line-height:1.5}
.bul-f .hint{font-size:.72rem;color:var(--apple-text-tertiary)}
.bul-mf{position:sticky;bottom:0;background:#fff;padding:1rem 1.75rem 1.5rem;border-top:1px solid rgba(79,124,130,.08);display:flex;gap:.6rem;justify-content:flex-end}
.bul-msg{font-size:.78rem;font-weight:600;margin-right:auto;align-self:center}
.bul-msg.err{color:#C0392B}
.bul-msg.ok{color:#2E7D52}
.bul-crow{display:grid;grid-template-columns:1.1fr 1.5fr .85fr .55fr .5fr auto;gap:.5rem;align-items:center;padding:.5rem 0;border-bottom:1px solid rgba(79,124,130,.06)}
.bul-crow.head{padding:0 0 .45rem;border-bottom:1px solid rgba(79,124,130,.12)}
.bul-crow.head span{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--apple-text-tertiary)}
.bul-ccode{font-size:.78rem;font-weight:700;color:var(--apple-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bul-cin{width:100%;padding:.45rem .55rem;border-radius:10px;border:1.5px solid rgba(79,124,130,.12);background:rgba(244,250,251,.5);font-family:inherit;font-size:.8rem;color:var(--winter-dark);outline:none}
.bul-cin:focus{border-color:var(--winter-medium);background:#fff}
.bul-cra{display:flex;gap:.3rem}
.bul-cra button{width:30px;height:30px;border-radius:9px;border:1px solid rgba(79,124,130,.12);background:#fff;color:var(--apple-text-tertiary);cursor:pointer;font-size:.85rem;line-height:1;transition:all .2s}
.bul-cra button:hover{color:var(--winter-dark);border-color:var(--winter-medium)}
.bul-cra button.del:hover{color:#C0392B;border-color:rgba(214,69,69,.35)}
.bul-cadd{margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid rgba(79,124,130,.1)}
.bul-cadd h5{margin:0 0 .8rem;font-size:.8rem;font-weight:800;color:var(--winter-dark)}


/* ==================== 10. blok (orijinal sətir 41801) ==================== */
/* ─────────── Təlimlər modulu · Apple / Winter Chill ─────────── */
@keyframes tlxUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes tlxIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
@keyframes tlxSpin{to{transform:rotate(360deg)}}
@keyframes tlxShim{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes tlxToastIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}

.tlx-overlay{position:fixed;inset:0;z-index:10001;display:none;opacity:0;visibility:hidden;
  background:linear-gradient(180deg,#F7FBFC 0%,#EDF6F7 45%,#F7FBFC 100%);
  overflow-y:auto;overflow-x:hidden;transition:opacity .32s ease,visibility .32s ease;
  -webkit-font-smoothing:antialiased}
.tlx-overlay.visible{display:block;opacity:1;visibility:visible}

/* soldan başlayan web layout — mərkəzə yığılmır */
.tlx-pw{width:100%;max-width:none;margin:0;min-height:100vh;padding:0 0 5rem}
.tlx-v{display:none;padding:1.9rem 2rem 0 2rem;animation:tlxIn .38s cubic-bezier(.32,.72,0,1) both}
.tlx-v.active{display:block}
@media(max-width:900px){.tlx-v{padding:1.25rem 1rem 0}}

/* ── Nav ── */
.tlx-nav{position:sticky;top:0;z-index:220;display:flex;align-items:center;gap:.8rem;
  padding:.7rem 2rem;background:rgba(255,255,255,.78);
  backdrop-filter:blur(30px) saturate(190%);-webkit-backdrop-filter:blur(30px) saturate(190%);
  border-bottom:1px solid rgba(79,124,130,.07)}
@media(max-width:900px){.tlx-nav{padding:.65rem 1rem}}
.tlx-nb{width:36px;height:36px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:rgba(255,255,255,.75);border:1px solid rgba(79,124,130,.1);border-radius:11px;
  color:var(--winter-medium);cursor:pointer;transition:all .22s cubic-bezier(.2,.8,.2,1)}
.tlx-nb:hover{background:#fff;border-color:var(--winter-medium);transform:scale(1.05)}
.tlx-nb svg{width:16px;height:16px}
.tlx-bc{display:flex;align-items:center;gap:.3rem;font-size:.76rem;color:var(--apple-text-tertiary);
  min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tlx-bc b{font-weight:650;color:var(--winter-dark)}
.tlx-bc span[data-go]{cursor:pointer;padding:.15rem .3rem;border-radius:6px;transition:background .18s}
.tlx-bc span[data-go]:hover{background:rgba(79,124,130,.08);color:var(--winter-dark)}
.tlx-bc svg{width:11px;height:11px;opacity:.4;flex-shrink:0}
.tlx-nav-sp{margin-left:auto}

/* ── Səhifə başlığı ── */
.tlx-head{display:flex;align-items:flex-start;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.tlx-h1{font-size:2.05rem;font-weight:750;letter-spacing:-.035em;color:var(--winter-dark);line-height:1.1}
.tlx-sub{font-size:.86rem;color:var(--apple-text-secondary);margin-top:.3rem;font-weight:450}
.tlx-head-r{margin-left:auto;display:flex;align-items:center;gap:.6rem}

/* ── Axtarış ── */
.tlx-search{position:relative;width:300px;max-width:100%}
.tlx-search svg{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);width:15px;height:15px;
  color:var(--apple-text-tertiary);opacity:.65;pointer-events:none}
.tlx-search input{width:100%;padding:.6rem .9rem .6rem 2.35rem;font-size:.83rem;font-family:inherit;
  color:var(--winter-dark);background:rgba(255,255,255,.9);border:1px solid rgba(79,124,130,.12);
  border-radius:12px;outline:none;transition:all .22s}
.tlx-search input::placeholder{color:var(--apple-text-tertiary);opacity:.7}
.tlx-search input:focus{background:#fff;border-color:var(--winter-medium);
  box-shadow:0 0 0 3.5px rgba(79,124,130,.1)}

/* ── Düymələr ── */
.tlx-btn{display:inline-flex;align-items:center;gap:.42rem;padding:.58rem 1.05rem;font-size:.81rem;
  font-weight:600;font-family:inherit;border-radius:11px;border:1px solid transparent;cursor:pointer;
  transition:all .22s cubic-bezier(.2,.8,.2,1);white-space:nowrap}
.tlx-btn svg{width:15px;height:15px}
.tlx-btn-pri{background:var(--winter-medium);color:#fff;box-shadow:0 2px 10px rgba(79,124,130,.24)}
.tlx-btn-pri:hover{background:var(--winter-dark);transform:translateY(-1px);box-shadow:0 6px 18px rgba(79,124,130,.3)}
.tlx-btn-gho{background:rgba(255,255,255,.85);color:var(--winter-medium);border-color:rgba(79,124,130,.14)}
.tlx-btn-gho:hover{background:#fff;border-color:var(--winter-medium)}
.tlx-btn-dan{background:rgba(220,53,69,.08);color:var(--status-red);border-color:rgba(220,53,69,.16)}
.tlx-btn-dan:hover{background:rgba(220,53,69,.14)}
.tlx-btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.tlx-lnk{background:none;border:none;font-family:inherit;font-size:.79rem;font-weight:600;
  color:var(--winter-medium);cursor:pointer;padding:.3rem .45rem;border-radius:7px;transition:background .18s}
.tlx-lnk:hover{background:rgba(79,124,130,.09)}

/* ── Stat kartlar ── */
.tlx-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.85rem;margin-bottom:1.6rem}
@media(max-width:1100px){.tlx-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tlx-stats{grid-template-columns:1fr}}
.tlx-stat{display:flex;align-items:center;gap:.95rem;padding:1.15rem 1.25rem;background:rgba(255,255,255,.92);
  border:1px solid rgba(79,124,130,.08);border-radius:18px;backdrop-filter:blur(12px);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s}
.tlx-stat:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(11,46,51,.07)}
.tlx-stat-ic{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;background:rgba(79,124,130,.1);color:var(--winter-medium)}
.tlx-stat-ic svg{width:19px;height:19px}
.tlx-stat-lbl{font-size:.665rem;font-weight:650;letter-spacing:.09em;text-transform:uppercase;
  color:var(--apple-text-tertiary)}
.tlx-stat-val{font-size:1.75rem;font-weight:780;letter-spacing:-.035em;line-height:1.05;
  color:var(--winter-dark);margin-top:.15rem;font-variant-numeric:tabular-nums}
.tlx-spark{margin-left:auto;width:74px;height:30px;flex-shrink:0;opacity:.85}

/* ── Proqram kartı ── */
.tlx-plist{display:flex;flex-direction:column;gap:1rem}
.tlx-pcard{position:relative;padding:1.5rem 1.6rem;background:rgba(255,255,255,.95);
  border:1px solid rgba(79,124,130,.08);border-radius:22px;cursor:pointer;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;
  animation:tlxUp .42s cubic-bezier(.32,.72,0,1) both}
.tlx-pcard:hover{transform:translateY(-3px);border-color:rgba(79,124,130,.18);
  box-shadow:0 16px 44px rgba(11,46,51,.09)}
.tlx-pcard-top{display:flex;align-items:flex-start;gap:.7rem;margin-bottom:.9rem}
.tlx-pcard-ttl{font-size:1.55rem;font-weight:730;letter-spacing:-.03em;color:var(--winter-dark);
  line-height:1.15;margin:.55rem 0 .8rem}
@media(max-width:640px){.tlx-pcard-ttl{font-size:1.2rem}}
.tlx-pcard-meta{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;font-size:.83rem;
  color:var(--apple-text-secondary);margin-bottom:1rem}
.tlx-dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.4;flex-shrink:0}
.tlx-pcard-bot{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.1rem}
.tlx-acts{position:absolute;top:1.15rem;right:1.2rem;display:flex;gap:.35rem;opacity:0;
  transition:opacity .22s}
.tlx-pcard:hover .tlx-acts,.tlx-scard:hover .tlx-acts{opacity:1}
.tlx-ia{width:31px;height:31px;display:flex;align-items:center;justify-content:center;border-radius:9px;
  background:rgba(255,255,255,.94);border:1px solid rgba(79,124,130,.12);color:var(--apple-text-tertiary);
  cursor:pointer;transition:all .2s}
.tlx-ia:hover{color:var(--winter-dark);border-color:var(--winter-medium);transform:scale(1.07)}
.tlx-ia.dan:hover{color:var(--status-red);border-color:rgba(220,53,69,.4)}
.tlx-ia svg{width:14px;height:14px}

/* ── Status nişanı ── */
.tlx-pill{display:inline-flex;align-items:center;gap:.3rem;padding:.28rem .68rem;border-radius:999px;
  font-size:.65rem;font-weight:750;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.tlx-pill.ok{background:var(--status-green-bg);color:var(--status-green);border:1px solid var(--status-green-border)}
.tlx-pill.live{background:var(--winter-medium);color:#fff}
.tlx-pill.plan{background:rgba(79,124,130,.08);color:var(--apple-text-tertiary);border:1px solid rgba(79,124,130,.12)}
.tlx-pill.cancel{background:var(--status-red-bg);color:var(--status-red);border:1px solid var(--status-red-border)}
.tlx-pill.today{background:linear-gradient(135deg,var(--winter-medium),#3F6A70);color:#fff;
  box-shadow:0 2px 10px rgba(79,124,130,.3)}

/* ── Progress ── */
.tlx-prog{display:flex;align-items:center;gap:.7rem;flex:1;min-width:190px}
.tlx-bar{flex:1;height:7px;border-radius:99px;background:rgba(79,124,130,.11);overflow:hidden}
.tlx-bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--winter-medium),#5E9199);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.tlx-prog-lbl{font-size:.78rem;color:var(--apple-text-secondary);font-weight:520;white-space:nowrap}

/* ── Avatar qrupu ── */
.tlx-avs{display:flex}
.tlx-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.68rem;font-weight:700;color:#fff;border:2.5px solid #fff;margin-left:-9px;flex-shrink:0;
  box-shadow:0 1px 5px rgba(11,46,51,.14)}
.tlx-av:first-child{margin-left:0}
.tlx-av.c1{background:linear-gradient(135deg,#4F7C82,#66989F)}
.tlx-av.c2{background:linear-gradient(135deg,#A23B72,#C05C90)}
.tlx-av.c3{background:linear-gradient(135deg,#3A6B70,#54898F)}
.tlx-av.c4{background:linear-gradient(135deg,#D4884A,#E3A268)}
.tlx-av.c5{background:linear-gradient(135deg,#5E7B82,#7B9BA3)}
.tlx-av.c6{background:linear-gradient(135deg,#2E86AB,#4CA3C6)}
.tlx-av.sm{width:26px;height:26px;font-size:.58rem;border-width:2px;margin-left:-7px}

/* ── Proqram hero (V2) ── */
.tlx-hero{display:flex;align-items:center;gap:2rem;padding:1.6rem 1.8rem;margin-bottom:1.5rem;
  background:rgba(255,255,255,.95);border:1px solid rgba(79,124,130,.08);border-radius:24px;
  box-shadow:0 4px 24px rgba(11,46,51,.04);flex-wrap:wrap}
.tlx-hero-l{flex:1;min-width:260px}
.tlx-hero-ttl{font-size:1.85rem;font-weight:740;letter-spacing:-.035em;color:var(--winter-dark);
  line-height:1.12;margin:.6rem 0 .45rem}
@media(max-width:640px){.tlx-hero-ttl{font-size:1.35rem}}
.tlx-hero-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.82rem;
  color:var(--apple-text-secondary)}
.tlx-kpis{display:flex;gap:2.4rem;margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid rgba(79,124,130,.08)}
.tlx-kpi-lbl{font-size:.7rem;color:var(--apple-text-tertiary);font-weight:550}
.tlx-kpi-val{font-size:1.5rem;font-weight:760;color:var(--winter-medium);letter-spacing:-.03em;
  margin-top:.1rem;font-variant-numeric:tabular-nums}
.tlx-ring{width:132px;height:132px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;position:relative;
  background:conic-gradient(var(--winter-medium) calc(var(--p)*1%),rgba(79,124,130,.13) 0)}
.tlx-ring::after{content:'';position:absolute;inset:11px;border-radius:50%;background:#fff}
.tlx-ring-in{position:relative;z-index:1;text-align:center;line-height:1.15}
.tlx-ring-num{font-size:1.65rem;font-weight:780;color:var(--winter-dark);letter-spacing:-.04em}
.tlx-ring-num small{font-size:.9rem;font-weight:600;color:var(--apple-text-tertiary)}
.tlx-ring-lbl{font-size:.63rem;color:var(--apple-text-tertiary);margin-top:.15rem;font-weight:550}

/* ── Sessiya grid ── */
.tlx-sec{display:flex;align-items:center;gap:.6rem;margin:.4rem 0 .9rem}
.tlx-sec-t{font-size:.72rem;font-weight:730;letter-spacing:.1em;text-transform:uppercase;color:var(--winter-dark)}
.tlx-sec-c{font-size:.72rem;color:var(--apple-text-tertiary);font-weight:550}
.tlx-sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:.9rem}
.tlx-scard{position:relative;padding:1.05rem 1.15rem;background:rgba(255,255,255,.95);
  border:1px solid rgba(79,124,130,.08);border-radius:17px;cursor:pointer;
  transition:transform .26s cubic-bezier(.2,.8,.2,1),box-shadow .26s,border-color .26s;
  animation:tlxUp .38s cubic-bezier(.32,.72,0,1) both}
.tlx-scard:hover{transform:translateY(-3px);border-color:rgba(79,124,130,.2);
  box-shadow:0 12px 32px rgba(11,46,51,.08)}
.tlx-scard.is-today{border-color:var(--winter-medium);box-shadow:0 0 0 3px rgba(79,124,130,.09)}
.tlx-scard.is-done{background:rgba(255,255,255,.72)}
.tlx-scard-h{display:flex;align-items:center;gap:.6rem;margin-bottom:.75rem}
.tlx-scard-n{font-size:.95rem;font-weight:700;color:var(--winter-dark);letter-spacing:-.015em}
.tlx-mrow{display:flex;align-items:center;gap:.42rem;font-size:.755rem;color:var(--apple-text-secondary);
  margin-bottom:.28rem}
.tlx-mrow svg{width:13px;height:13px;opacity:.5;flex-shrink:0}
.tlx-mrow em{font-style:normal;color:var(--apple-text-tertiary);font-size:.71rem}
.tlx-scard-f{display:flex;align-items:center;gap:.6rem;margin-top:.75rem}
.tlx-scard-f .tlx-bar{height:5px}
.tlx-scard-f .tlx-prog-lbl{font-size:.72rem;font-variant-numeric:tabular-nums}

/* ── Sessiya detalı ── */
.tlx-dh{margin-bottom:1.3rem}
.tlx-dh-t{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.tlx-dh-t h2{font-size:1.7rem;font-weight:740;letter-spacing:-.035em;color:var(--winter-dark)}
.tlx-dh-m{display:flex;align-items:center;gap:1.15rem;flex-wrap:wrap;margin-top:.55rem;
  font-size:.79rem;color:var(--apple-text-secondary)}
.tlx-dh-m span{display:inline-flex;align-items:center;gap:.35rem}
.tlx-dh-m svg{width:13px;height:13px;opacity:.55}

.tlx-panel{background:rgba(255,255,255,.95);border:1px solid rgba(79,124,130,.08);border-radius:20px;
  box-shadow:0 3px 20px rgba(11,46,51,.035);overflow:hidden;margin-bottom:1.1rem}
.tlx-mstats{display:flex;align-items:center;gap:2.4rem;padding:1.35rem 1.6rem;flex-wrap:wrap}
.tlx-donut{width:104px;height:104px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;position:relative;
  background:conic-gradient(var(--winter-medium) calc(var(--p)*1%),rgba(79,124,130,.13) 0)}
.tlx-donut::after{content:'';position:absolute;inset:10px;border-radius:50%;background:#fff}
.tlx-mstat{padding-left:2.4rem;border-left:1px solid rgba(79,124,130,.1)}
.tlx-mstat:first-of-type{border-left:none;padding-left:0}
.tlx-mstat-l{display:flex;align-items:center;gap:.4rem;font-size:.68rem;font-weight:650;
  letter-spacing:.08em;text-transform:uppercase;color:var(--apple-text-tertiary)}
.tlx-mstat-l i{width:7px;height:7px;border-radius:50%;display:inline-block}
.tlx-mstat-v{font-size:1.8rem;font-weight:780;color:var(--winter-dark);letter-spacing:-.035em;
  margin-top:.25rem;font-variant-numeric:tabular-nums}

.tlx-tbar{display:flex;align-items:center;gap:.75rem;padding:.85rem 1.1rem;flex-wrap:wrap;
  border-bottom:1px solid rgba(79,124,130,.07)}
.tlx-tbar .tlx-search{width:250px}
.tlx-segs{display:flex;gap:.3rem;background:rgba(79,124,130,.06);padding:.22rem;border-radius:11px}
.tlx-seg{padding:.4rem .85rem;font-size:.76rem;font-weight:600;font-family:inherit;color:var(--apple-text-secondary);
  background:none;border:none;border-radius:9px;cursor:pointer;transition:all .22s;white-space:nowrap}
.tlx-seg.on{background:var(--winter-medium);color:#fff;box-shadow:0 2px 8px rgba(79,124,130,.22)}
.tlx-tbar-r{margin-left:auto;display:flex;align-items:center;gap:.9rem}
.tlx-upd{font-size:.71rem;color:var(--apple-text-tertiary)}

/* ── Cədvəl ── */
.tlx-tw{overflow-x:auto}
.tlx-tbl{width:100%;border-collapse:collapse;font-size:.815rem}
.tlx-tbl th{padding:.7rem 1rem;text-align:left;font-size:.645rem;font-weight:700;letter-spacing:.085em;
  text-transform:uppercase;color:var(--apple-text-tertiary);background:rgba(79,124,130,.028);
  border-bottom:1px solid rgba(79,124,130,.08);white-space:nowrap}
.tlx-tbl td{padding:.62rem 1rem;border-bottom:1px solid rgba(79,124,130,.05);color:var(--apple-text-primary);
  vertical-align:middle}
.tlx-tbl tbody tr{transition:background .16s}
.tlx-tbl tbody tr:hover{background:rgba(79,124,130,.032)}
.tlx-tbl tbody tr.absent{background:rgba(220,53,69,.045)}
.tlx-tbl tbody tr.absent:hover{background:rgba(220,53,69,.07)}
.tlx-tbl td.num{color:var(--apple-text-tertiary);font-variant-numeric:tabular-nums;font-size:.78rem}
.tlx-nm{display:flex;align-items:center;gap:.6rem;white-space:nowrap}
.tlx-nm b{font-weight:560}
.tlx-mut{color:var(--apple-text-secondary);font-size:.78rem}
.tlx-tf{display:flex;align-items:center;gap:1rem;padding:.85rem 1.1rem;flex-wrap:wrap;
  border-top:1px solid rgba(79,124,130,.07);background:rgba(79,124,130,.018)}
.tlx-tf-l{font-size:.775rem;color:var(--apple-text-secondary);font-variant-numeric:tabular-nums}
.tlx-tf-r{margin-left:auto;display:flex;gap:.55rem}

/* ── Toggle ── */
.tlx-sw{position:relative;width:42px;height:24px;border-radius:99px;background:rgba(79,124,130,.2);
  border:none;cursor:pointer;padding:0;transition:background .26s cubic-bezier(.2,.8,.2,1);flex-shrink:0}
.tlx-sw::after{content:'';position:absolute;top:2.5px;left:2.5px;width:19px;height:19px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(11,46,51,.25);transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.tlx-sw.on{background:var(--winter-medium)}
.tlx-sw.on::after{transform:translateX(18px)}
.tlx-sw:disabled{opacity:.45;cursor:not-allowed}
.tlx-cb{width:16px;height:16px;accent-color:var(--winter-medium);cursor:pointer}

/* ── Modal ── */
.tlx-mov{position:fixed;inset:0;z-index:10050;display:none;align-items:center;justify-content:center;
  padding:1.5rem;background:rgba(11,46,51,.34);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  opacity:0;transition:opacity .26s}
.tlx-mov.visible{display:flex;opacity:1}
.tlx-modal{width:100%;max-width:560px;max-height:88vh;overflow-y:auto;background:#fff;border-radius:24px;
  box-shadow:0 32px 80px rgba(11,46,51,.28);animation:tlxUp .32s cubic-bezier(.32,.72,0,1) both}
.tlx-modal.wide{max-width:680px}
.tlx-mh{display:flex;align-items:center;gap:.8rem;padding:1.3rem 1.6rem 1rem}
.tlx-mh h3{font-size:1.12rem;font-weight:710;color:var(--winter-dark);letter-spacing:-.02em}
.tlx-mh .tlx-ia{margin-left:auto}
.tlx-mb{padding:0 1.6rem 1.3rem;display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.tlx-mf{display:flex;flex-direction:column;gap:.32rem}
.tlx-mf.full{grid-column:1/-1}
.tlx-mf label{font-size:.7rem;font-weight:650;letter-spacing:.045em;color:var(--apple-text-tertiary)}
.tlx-mf input,.tlx-mf select,.tlx-mf textarea{width:100%;padding:.6rem .8rem;font-size:.83rem;
  font-family:inherit;color:var(--winter-dark);background:rgba(79,124,130,.045);
  border:1px solid rgba(79,124,130,.1);border-radius:11px;outline:none;transition:all .2s}
.tlx-mf textarea{resize:vertical;min-height:72px}
.tlx-mf input:focus,.tlx-mf select:focus,.tlx-mf textarea:focus{background:#fff;
  border-color:var(--winter-medium);box-shadow:0 0 0 3.5px rgba(79,124,130,.1)}
.tlx-mfoot{display:flex;gap:.55rem;padding:1rem 1.6rem 1.4rem;border-top:1px solid rgba(79,124,130,.07)}
.tlx-mfoot .tlx-sp{margin-left:auto}
.tlx-hint{font-size:.7rem;color:var(--apple-text-tertiary);grid-column:1/-1;margin-top:-.3rem}

/* ── İştirakçı seçici ── */
.tlx-pick{max-height:320px;overflow-y:auto;border:1px solid rgba(79,124,130,.1);border-radius:14px;
  margin:0 1.6rem 1.2rem}
.tlx-pick-i{display:flex;align-items:center;gap:.7rem;padding:.6rem .9rem;cursor:pointer;
  border-bottom:1px solid rgba(79,124,130,.05);transition:background .16s}
.tlx-pick-i:last-child{border-bottom:none}
.tlx-pick-i:hover{background:rgba(79,124,130,.05)}
.tlx-pick-i.dis{opacity:.4;cursor:not-allowed}
.tlx-pick-n{font-size:.82rem;font-weight:560;color:var(--winter-dark)}
.tlx-pick-m{font-size:.71rem;color:var(--apple-text-tertiary);margin-top:.08rem}

/* ── Boş / yüklənir ── */
.tlx-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 1rem;
  color:var(--apple-text-tertiary);text-align:center}
.tlx-empty svg{width:38px;height:38px;opacity:.28;margin-bottom:.85rem}
.tlx-empty h4{font-size:.95rem;font-weight:650;color:var(--apple-text-secondary);margin-bottom:.3rem}
.tlx-empty p{font-size:.8rem;margin-bottom:1rem}
.tlx-load{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:4rem;
  color:var(--apple-text-tertiary);font-size:.83rem}
.tlx-sp2{width:19px;height:19px;border:2px solid rgba(79,124,130,.14);border-top-color:var(--winter-medium);
  border-radius:50%;animation:tlxSpin .62s linear infinite}
.tlx-skel{height:96px;border-radius:20px;margin-bottom:.9rem;
  background:linear-gradient(90deg,rgba(79,124,130,.05) 25%,rgba(79,124,130,.1) 50%,rgba(79,124,130,.05) 75%);
  background-size:200% 100%;animation:tlxShim 1.3s linear infinite}

/* ── Toast ── */
.tlx-toast{position:fixed;bottom:1.6rem;left:2rem;z-index:10099;display:flex;align-items:center;gap:.55rem;
  padding:.75rem 1.1rem;background:rgba(11,46,51,.94);color:#fff;font-size:.82rem;font-weight:520;
  border-radius:13px;box-shadow:0 12px 36px rgba(11,46,51,.3);backdrop-filter:blur(18px);
  animation:tlxToastIn .3s cubic-bezier(.32,.72,0,1) both}
.tlx-toast svg{width:15px;height:15px;flex-shrink:0}
.tlx-toast.err{background:rgba(180,40,52,.95)}

@media(prefers-reduced-motion:reduce){
  .tlx-overlay *,.tlx-overlay{animation:none!important;transition:none!important}
}


/* ==================== 11. blok (orijinal sətir 46306) ==================== */
/* Timeline düyməsi (kart üzərində, status label-in yanında) */
  .pt-timeline-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.7rem;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    color: var(--winter-medium);
    background: rgba(79, 124, 130, 0.10);
    border: 1px solid rgba(79, 124, 130, 0.18);
    transition: all 0.2s ease;
  }
  .pt-timeline-btn:hover {
    background: var(--winter-medium);
    color: #fff;
    border-color: var(--winter-medium);
    transform: translateY(-1px);
  }
  .pt-timeline-btn svg { width: 13px; height: 13px; }
  @media (max-width: 640px) {
    .pt-timeline-btn span { display: none; }
    .pt-timeline-btn { padding: 0.35rem; }
  }

  /* ===== Timeline tam-ekran overlay ===== */
  .ptt-overlay {
    position: fixed; inset: 0;
    background: linear-gradient(180deg, #F4FAFB 0%, #E5F2F4 45%, #F4FAFB 100%);
    z-index: 10050;
    display: none;
    overflow-y: auto;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
    color: var(--winter-dark);
  }
  .ptt-overlay.visible { display: block; animation: pttFade 0.3s ease; }
  @keyframes pttFade { from { opacity: 0; } to { opacity: 1; } }

  /* Üst panel (sticky) */
  .ptt-topbar {
    position: sticky; top: 0; z-index: 20;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    background: rgba(244, 250, 251, 0.78);
    border-bottom: 1px solid rgba(79, 124, 130, 0.14);
  }
  .ptt-topbar-inner {
    max-width: 1180px; margin: 0 auto;
    padding: 0 22px; min-height: 60px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
  }
  .ptt-brand { min-width: 0; }
  .ptt-brand-title {
    font-size: 1rem; font-weight: 700; letter-spacing: -0.01em;
    color: var(--winter-dark); line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw;
  }
  .ptt-brand-sub {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--winter-medium); margin-top: 2px;
  }
  .ptt-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .ptt-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 15px; border-radius: 100px;
    font-size: 0.78rem; font-weight: 600; font-family: inherit;
    cursor: pointer; border: 1px solid transparent; transition: all 0.2s ease; white-space: nowrap;
  }
  .ptt-btn svg { width: 15px; height: 15px; }
  .ptt-btn-edit { color: var(--winter-medium); background: rgba(79,124,130,0.10); border-color: rgba(79,124,130,0.20); }
  .ptt-btn-edit:hover { background: rgba(79,124,130,0.18); }
  .ptt-btn-edit.active { background: var(--apple-orange); color: #fff; border-color: var(--apple-orange); }
  .ptt-btn-save { color: #fff; background: linear-gradient(135deg, var(--winter-medium), var(--winter-dark)); border-color: var(--winter-dark); }
  .ptt-btn-save:hover { filter: brightness(1.08); }
  .ptt-btn-save:disabled { opacity: 0.55; cursor: default; }
  .ptt-btn-close { color: #fff; background: linear-gradient(135deg, var(--winter-medium), var(--winter-dark)); border-color: var(--winter-dark); }
  .ptt-btn-close:hover { filter: brightness(1.08); }
  /* Yalnız ps_engineer görsün — body.role-ps-engineer olmadıqda gizlət */
  body:not(.role-ps-engineer) .ptt-btn-edit,
  body:not(.role-ps-engineer) .ptt-btn-save { display: none !important; }

  /* Hero */
  .ptt-hero { max-width: 760px; margin: 0 auto; padding: 54px 22px 18px; text-align: center; }
  .ptt-hero-eyebrow {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--winter-medium); margin-bottom: 12px;
  }
  .ptt-hero-title {
    font-size: clamp(26px, 4.4vw, 40px); font-weight: 700; letter-spacing: -0.02em;
    line-height: 1.1; margin: 0 0 12px; color: var(--winter-dark);
  }
  .ptt-hero-sub { font-size: clamp(14px, 2vw, 16px); line-height: 1.5; color: var(--apple-text-secondary); margin: 0 auto; max-width: 560px; }
  .ptt-progress {
    margin: 22px auto 8px; max-width: 420px; height: 8px; border-radius: 100px;
    background: rgba(79,124,130,0.14); overflow: hidden;
  }
  .ptt-progress-fill {
    height: 100%; width: 0%; border-radius: 100px;
    background: linear-gradient(90deg, var(--winter-light), var(--winter-medium));
    transition: width 0.6s cubic-bezier(.16,1,.3,1);
  }
  .ptt-progress-label { font-size: 0.76rem; font-weight: 600; color: var(--winter-medium); }

  /* Horizontal scroller */
  .ptt-scroll-wrap { position: relative; }
  .ptt-fade-l, .ptt-fade-r { position: absolute; top: 0; bottom: 0; width: 56px; pointer-events: none; z-index: 6; }
  .ptt-fade-l { left: 0; background: linear-gradient(90deg, #F4FAFB, rgba(244,250,251,0)); }
  .ptt-fade-r { right: 0; background: linear-gradient(270deg, #F4FAFB, rgba(244,250,251,0)); }
  .ptt-scroll {
    overflow-x: auto; overflow-y: hidden; padding: 24px 0 70px;
  scroll-snap-type: x proximity;
  }
  .ptt-scroll::-webkit-scrollbar { height: 8px; }
  .ptt-scroll::-webkit-scrollbar-thumb { background: rgba(79,124,130,0.30); border-radius: 8px; }
  .ptt-scroll::-webkit-scrollbar-track { background: transparent; }
  .ptt-track {
    display: flex; align-items: stretch; width: max-content;
    padding: 0 max(40px, calc((100vw - 1180px)/2)); position: relative;
  }
  .ptt-baseline {
    position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-1px);
    background: linear-gradient(90deg, rgba(79,124,130,0) 0%, rgba(79,124,130,0.25) 5%, rgba(79,124,130,0.25) 95%, rgba(79,124,130,0) 100%);
  }
  .ptt-stage {
    position: relative; width: 300px; flex: none;
    display: flex; flex-direction: column; min-height: 520px; scroll-snap-align: center;
  }
  .ptt-slot { flex: 1; display: flex; justify-content: center; padding: 0 16px; }
  .ptt-slot-top { align-items: flex-end; padding-bottom: 28px; }
  .ptt-slot-bottom { align-items: flex-start; padding-top: 28px; }
  .ptt-node { position: relative; display: flex; align-items: center; justify-content: center; height: 0; }
  .ptt-dot {
    width: 16px; height: 16px; border-radius: 50%; z-index: 2;
    background: var(--winter-light); box-shadow: 0 0 0 5px rgba(147,177,181,0.22);
    transition: all 0.3s ease;
  }
  .ptt-dot.completed { background: var(--apple-green); box-shadow: 0 0 0 5px rgba(58,107,112,0.20); }
  .ptt-dot.current  { background: var(--apple-orange); box-shadow: 0 0 0 5px rgba(212,136,74,0.22); }

  /* Mərhələ kartı */
  .ptt-card {
    width: 100%; background: #fff;
    border: 1px solid rgba(79,124,130,0.12); border-radius: 18px;
    padding: 18px 18px 18px;
    box-shadow: 0 4px 16px rgba(11,46,51,0.06);
    transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1);
  }
  .ptt-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(11,46,51,0.12); }
  .ptt-card.done { border-color: rgba(58,107,112,0.30); }
  .ptt-card.current { border-color: rgba(212,136,74,0.35); }
  .ptt-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .ptt-card-num {
    width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0;
    background: rgba(79,124,130,0.12); color: var(--winter-medium);
    font-size: 0.82rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  }
  .ptt-card.done .ptt-card-num { background: rgba(58,107,112,0.15); color: var(--apple-green); }
  .ptt-card-phase { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--winter-medium); }
  .ptt-card-title { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; color: var(--winter-dark); margin-bottom: 6px; line-height: 1.25; }
  .ptt-card-desc { font-size: 0.8rem; line-height: 1.5; color: var(--apple-text-secondary); }
  .ptt-card-status { margin-top: 14px; }
  .ptt-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 0.32rem 0.65rem; border-radius: 100px; font-size: 0.72rem; font-weight: 600;
  }
  .ptt-badge svg { width: 12px; height: 12px; }
  .ptt-badge.done {
    background: rgba(46, 139, 130, 0.12);
    color: #2E8B82;
    padding-left: 0.4rem;
  }
  .ptt-check-circle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #34C7A8 0%, #2E8B82 100%);
    box-shadow: 0 2px 7px rgba(52, 199, 168, 0.45), inset 0 1px 1px rgba(255,255,255,0.35);
    animation: pttCheckPop 0.45s cubic-bezier(.34,1.56,.64,1) both;
  }
  .ptt-check-circle svg { width: 13px; height: 13px; }
  .ptt-check-circle svg path {
    stroke-dasharray: 22; stroke-dashoffset: 22;
    animation: pttCheckDraw 0.5s cubic-bezier(.16,1,.3,1) 0.12s forwards;
  }
  @keyframes pttCheckPop { 0% { transform: scale(0); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
  @keyframes pttCheckDraw { to { stroke-dashoffset: 0; } }
  .ptt-badge.wait { background: rgba(147,177,181,0.18); color: var(--winter-medium); }
  .ptt-card-dur {
    margin-top: 12px; font-size: 0.72rem; font-weight: 600; color: var(--apple-text-tertiary);
    display: flex; align-items: center; gap: 5px;
  }
  .ptt-card-dur svg { width: 12px; height: 12px; }
  .ptt-card-dur.ongoing { color: var(--apple-orange); }

  /* Redaktə sahələri */
  .ptt-card-edit { display: none; margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(79,124,130,0.22); }
  .ptt-overlay.edit-mode .ptt-card-edit { display: block; }
  .ptt-check { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; color: var(--winter-dark); cursor: pointer; margin-bottom: 10px; }
  .ptt-check input { width: 16px; height: 16px; accent-color: var(--apple-green); cursor: pointer; }
  .ptt-date {
    width: 100%; padding: 8px 10px; border-radius: 10px;
    border: 1px solid rgba(79,124,130,0.25); background: #F4FAFB;
    font-size: 0.8rem; font-family: inherit; color: var(--winter-dark);
  }
  .ptt-date:focus { outline: none; border-color: var(--winter-medium); box-shadow: 0 0 0 3px rgba(79,124,130,0.14); }
  .ptt-date:disabled { opacity: 0.45; }

  /* Toast */
  .ptt-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--winter-dark); color: #fff; padding: 12px 22px; border-radius: 100px;
    font-size: 0.82rem; font-weight: 600; z-index: 10060; opacity: 0; pointer-events: none;
    transition: all 0.3s ease; box-shadow: 0 10px 30px rgba(11,46,51,0.25);
  }
  .ptt-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  .ptt-toast.error { background: var(--apple-red); }

  @media (max-width: 640px) {
    .ptt-stage { width: 250px; min-height: 440px; }
    .ptt-brand-title { max-width: 42vw; }
  }


/* ==================== 12. blok (orijinal sətir 46895) ==================== */
/* ════════════════  SIZMA MODULU — Apple-grade, winter-chill  ════════════════ */
#lkRoot{
  --lk-bg:#F4FAFB; --lk-surface:#FFFFFF; --lk-tert:#EBF5F6;
  --lk-ink:#0B2E33; --lk-ink2:#3D5A5F; --lk-ink3:#6E8B90;
  --lk-line:#E2EEF0; --lk-line2:#EDF4F5;
  --lk-teal:#4F7C82; --lk-green:#3A6B70; --lk-orange:#D4884A;
  --lk-red:#C45C5C; --lk-blue:#4F7C82; --lk-ok:#2FA46A;
  --lk-r:18px; --lk-r2:12px; --lk-r3:9px;
  --lk-sh-sm:0 2px 8px rgba(11,46,51,.06);
  --lk-sh-md:0 8px 24px rgba(11,46,51,.10);
  --lk-sh-lg:0 16px 48px rgba(11,46,51,.14);
  --lk-ease:cubic-bezier(.22,.61,.36,1);
}

/* ── Overlay shell ── */
.lk-overlay{
  position:fixed; inset:0; z-index:4000; overflow-y:auto;
  background:linear-gradient(180deg,#F4FAFB 0%,#EEF6F7 45%,#E9F2F3 100%);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif;
  color:var(--lk-ink); -webkit-font-smoothing:antialiased;
  opacity:0; visibility:hidden; transform:scale(.985) translateY(8px);
  transition:opacity .34s var(--lk-ease), transform .34s var(--lk-ease), visibility .34s;
}
.lk-overlay.show{ opacity:1; visibility:visible; transform:none; }
.lk-wrap{ max-width:none; width:100%; margin:0; padding:8px 40px 56px; }

/* ── Top row: breadcrumb left, back button right ── */
.lk-topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0 6px; flex-wrap:wrap-reverse; }
.lk-pageback{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  border:1px solid rgba(11,46,51,.08);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(12px); backdrop-filter:saturate(180%) blur(12px);
  color:var(--lk-ink); font:600 13px/1 inherit; letter-spacing:-.1px;
  padding:9px 15px 9px 11px; border-radius:980px;
  box-shadow:0 1px 2px rgba(11,46,51,.06), 0 4px 14px -6px rgba(11,46,51,.14);
  transition:transform .24s var(--lk-ease), box-shadow .24s var(--lk-ease), background .24s var(--lk-ease);
  white-space:nowrap;
}
.lk-pageback:hover{ background:#fff; box-shadow:0 2px 4px rgba(11,46,51,.07), 0 10px 26px -8px rgba(11,46,51,.22); transform:translateY(-1px); }
.lk-pageback:active{ transform:translateY(0) scale(.98); }
.lk-pageback .lk-ic{ width:16px; height:16px; color:var(--lk-teal); transition:transform .24s var(--lk-ease); }
.lk-pageback:hover .lk-ic{ transform:translateX(-3px); }

/* ── Page heading row ── */
.lk-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:6px 0 4px; flex-wrap:wrap; }
.lk-crumb{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--lk-ink3); margin-bottom:0; }
.lk-crumb a{ color:var(--lk-teal); cursor:pointer; font-weight:600; text-decoration:none; }
.lk-crumb a:hover{ text-decoration:underline; }
.lk-h1{ font-size:27px; font-weight:700; letter-spacing:-.5px; }
.lk-sub{ font-size:14px; color:var(--lk-ink3); margin-top:5px; }
.lk-actions{ display:flex; align-items:center; gap:10px; }

/* ── Buttons ── */
.lk-btn{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:1px solid transparent; font:600 13.5px/1 inherit; letter-spacing:-.1px; padding:11px 16px; border-radius:12px; transition:transform .2s var(--lk-ease), box-shadow .2s var(--lk-ease), background .2s var(--lk-ease), border-color .2s var(--lk-ease); white-space:nowrap; }
.lk-btn:active{ transform:scale(.97); }
.lk-btn .lk-ic{ width:16px; height:16px; }
.lk-btn-primary{ background:linear-gradient(135deg,var(--lk-teal),var(--lk-green)); color:#fff; box-shadow:0 6px 16px rgba(58,107,112,.28); }
.lk-btn-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(58,107,112,.34); }
.lk-btn-primary:active{ transform:translateY(0) scale(.98); }
.lk-btn-ghost{ background:rgba(255,255,255,.72); -webkit-backdrop-filter:saturate(180%) blur(10px); backdrop-filter:saturate(180%) blur(10px); color:var(--lk-ink2); border-color:rgba(11,46,51,.08); box-shadow:0 1px 2px rgba(11,46,51,.05); }
.lk-btn-ghost:hover{ background:#fff; border-color:#D3E6E8; color:var(--lk-ink); box-shadow:0 4px 14px -6px rgba(11,46,51,.18); }
.lk-btn-danger{ background:rgba(196,92,92,.10); color:var(--lk-red); }
.lk-btn-danger:hover{ background:rgba(196,92,92,.18); }
.lk-icbtn{ width:40px; height:40px; padding:0; justify-content:center; border-radius:12px; }

/* ── Stat cards ── */
.lk-stats{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; padding:22px 0 0; }
.lk-stat{ position:relative; background:var(--lk-surface); border:1px solid var(--lk-line); border-radius:var(--lk-r); padding:18px 18px 16px; cursor:pointer; transition:.24s var(--lk-ease); overflow:hidden; }
.lk-stat:hover{ transform:translateY(-3px); box-shadow:var(--lk-sh-md); border-color:#D3E6E8; }
.lk-stat.on{ border-color:var(--lk-teal); box-shadow:0 0 0 3px rgba(79,124,130,.14), var(--lk-sh-md); }
.lk-stat::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c,var(--lk-teal)); opacity:0; transition:.24s var(--lk-ease); }
.lk-stat.on::before{ opacity:1; }
.lk-stat-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.lk-stat-lbl{ font-size:11px; font-weight:700; letter-spacing:.4px; color:var(--lk-ink3); text-transform:uppercase; line-height:1.3; }
.lk-stat-ic{ width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--c,var(--lk-teal)) 12%,#fff); color:var(--c,var(--lk-teal)); flex-shrink:0; }
.lk-stat-ic .lk-ic{ width:16px; height:16px; }
.lk-stat-num{ font-size:38px; font-weight:700; letter-spacing:-1px; margin-top:14px; line-height:1; }
.lk-stat-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; min-height:18px; }
.lk-stat-sub{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--lk-ink2); background:var(--lk-tert); padding:4px 9px; border-radius:999px; }
.lk-stat-sub .d{ width:6px; height:6px; border-radius:50%; background:var(--lk-orange); box-shadow:0 0 0 3px color-mix(in srgb,var(--lk-orange) 18%,transparent); }
.lk-trend{ display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:700; }
.lk-trend.up{ color:var(--lk-red); } .lk-trend.down{ color:var(--lk-ok); } .lk-trend.flat{ color:var(--lk-ink3); }
.lk-trend.good-up{ color:var(--lk-ok); } .lk-trend.good-down{ color:var(--lk-red); }
.lk-trend .lk-ic{ width:13px; height:13px; }

/* ── Panel ── */
.lk-panel{ background:var(--lk-surface); border:1px solid var(--lk-line); border-radius:var(--lk-r); margin-top:22px; padding:18px 20px; box-shadow:var(--lk-sh-sm); }

/* ── Toolbar ── */
.lk-tools{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.lk-search{ flex:1; min-width:240px; display:flex; align-items:center; gap:9px; border:1px solid var(--lk-line); border-radius:11px; padding:10px 14px; transition:.2s var(--lk-ease); }
.lk-search:focus-within{ border-color:var(--lk-teal); box-shadow:0 0 0 3px rgba(79,124,130,.12); }
.lk-search .lk-ic{ width:17px; height:17px; color:var(--lk-ink3); }
.lk-search input{ border:0; outline:0; flex:1; font:400 14px/1.2 inherit; color:var(--lk-ink); background:transparent; }
.lk-sel-wrap{ position:relative; }
.lk-sel{ appearance:none; -webkit-appearance:none; cursor:pointer; border:1px solid var(--lk-line); border-radius:10px; padding:10px 30px 10px 14px; font:500 13px/1 inherit; color:var(--lk-ink2); background:var(--lk-surface); transition:.2s var(--lk-ease); }
.lk-sel:hover{ border-color:#D3E6E8; }
.lk-sel.active{ border-color:var(--lk-teal); color:var(--lk-ink); font-weight:600; }
.lk-sel-wrap::after{ content:"▾"; position:absolute; right:11px; top:50%; transform:translateY(-50%); font-size:10px; color:var(--lk-ink3); pointer-events:none; }
.lk-datein{ border:1px solid var(--lk-line); border-radius:10px; padding:10px 12px; font:500 13px/1 inherit; color:var(--lk-ink2); background:var(--lk-surface); }
.lk-reset{ font:600 13px/1 inherit; color:var(--lk-teal); cursor:pointer; padding:0 6px; }
.lk-reset:hover{ text-decoration:underline; }
.lk-chips{ display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:14px; }
.lk-chip{ display:inline-flex; align-items:center; gap:8px; background:var(--lk-tert); border-radius:9px; padding:7px 12px; font:500 12.5px/1 inherit; color:var(--lk-ink2); }
.lk-chip b{ color:var(--lk-teal); cursor:pointer; font-weight:700; }

/* ── Table ── */
.lk-tbl-title{ font-size:17px; font-weight:700; padding:6px 2px 12px; }
.lk-grid{ --cols:1fr 1fr 1fr 1fr 1.4fr 1fr 1.2fr 1.2fr; display:grid; grid-template-columns:var(--cols); align-items:center; gap:0; }
.lk-thead{ padding:10px 14px; font-size:10.5px; font-weight:700; letter-spacing:.5px; color:var(--lk-ink3); text-transform:uppercase; }
.lk-row{ padding:13px 14px; font-size:13.5px; color:var(--lk-ink); border-top:1px solid var(--lk-line2); cursor:pointer; transition:.16s var(--lk-ease); }
.lk-row:hover{ background:var(--lk-tert); }
.lk-row .muted{ color:var(--lk-ink2); }
.lk-code{ display:inline-block; border:1px solid var(--lk-line); border-radius:8px; padding:5px 9px; font:600 12px/1 'SF Mono',ui-monospace,monospace; color:var(--lk-ink2); background:var(--lk-bg); }
.lk-unit{ display:flex; align-items:center; gap:7px; font-weight:600; }
.lk-unit .lk-ic{ width:15px; height:15px; color:var(--lk-ink3); }
.lk-status{ display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:13px; }
.lk-status .sd{ width:8px; height:8px; border-radius:50%; }
.lk-ell{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:10px; }

/* ── Empty / loading ── */
.lk-empty{ text-align:center; padding:64px 20px; color:var(--lk-ink3); }
.lk-empty .lk-ic{ width:42px; height:42px; color:#BFD6D9; margin-bottom:14px; }
.lk-empty h4{ font-size:16px; font-weight:700; color:var(--lk-ink2); margin-bottom:6px; }
.lk-empty p{ font-size:13.5px; }
.lk-loading{ padding:60px; text-align:center; color:var(--lk-ink3); font-size:14px; }

/* ── Pager ── */
.lk-pager{ display:flex; align-items:center; justify-content:space-between; padding:18px 4px 2px; border-top:1px solid var(--lk-line2); margin-top:8px; }
.lk-pager .info{ font-size:13px; color:var(--lk-ink3); }
.lk-pages{ display:flex; align-items:center; gap:6px; }
.lk-pg{ min-width:34px; height:34px; padding:0 8px; border-radius:9px; border:0; cursor:pointer; background:transparent; color:var(--lk-ink2); font:600 13.5px/1 inherit; display:flex; align-items:center; justify-content:center; transition:.16s; }
.lk-pg:hover{ background:var(--lk-tert); }
.lk-pg.on{ background:var(--lk-ink); color:#fff; }
.lk-pg:disabled{ opacity:.4; cursor:default; }

/* ════════════════  DETAL  ════════════════ */
.lk-title-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0 4px; flex-wrap:wrap; }
.lk-title-l{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.lk-unit-big{ font-size:30px; font-weight:800; letter-spacing:-.7px; color:var(--lk-ink); }
.lk-title-sub{ font-size:16px; color:var(--lk-ink2); font-weight:500; }
.lk-badge{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px; font:600 12.5px/1 inherit; letter-spacing:-.1px; }
.lk-grid2{ display:grid; grid-template-columns:1.7fr 1fr; gap:18px; margin-top:22px; align-items:start; }

.lk-card{
  position:relative; background:var(--lk-surface);
  border:1px solid rgba(11,46,51,.06); border-radius:20px;
  padding:22px 24px;
  box-shadow:0 1px 2px rgba(11,46,51,.04), 0 8px 24px -16px rgba(11,46,51,.18);
  transition:box-shadow .3s var(--lk-ease), transform .3s var(--lk-ease), border-color .3s var(--lk-ease);
}
.lk-card:hover{ box-shadow:0 1px 2px rgba(11,46,51,.05), 0 16px 40px -22px rgba(11,46,51,.30); border-color:rgba(11,46,51,.09); }
.lk-card + .lk-card{ margin-top:18px; }
.lk-card-h{ display:flex; align-items:center; gap:11px; font-size:15px; font-weight:700; letter-spacing:-.2px; margin-bottom:18px; color:var(--lk-ink); }
.lk-card-h .lk-ic{ width:17px; height:17px; color:var(--lk-teal); position:relative; z-index:1; }
.lk-card-h-ic{
  width:32px; height:32px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--lk-teal) 12%,#fff);
}

.lk-kv{ display:grid; grid-template-columns:1fr 1fr; gap:20px 28px; }
.lk-kv .k{ font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--lk-ink3); display:flex; align-items:center; gap:6px; }
.lk-kv .k .lk-ic{ width:13px; height:13px; opacity:.85; }
.lk-kv .v{ font-size:14.5px; font-weight:600; margin-top:6px; color:var(--lk-ink); letter-spacing:-.1px; }
.lk-kv .v.empty{ color:#B7CBCE; font-weight:500; }
.lk-desc{ font-size:14px; line-height:1.65; color:var(--lk-ink2); }
.lk-empty-txt{ color:#AFC4C7; font-size:13.5px; font-style:italic; }
.lk-thumbs{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.lk-thumb{ width:92px; height:68px; border-radius:13px; border:1px solid var(--lk-line); background:var(--lk-tert) center/cover; display:flex; align-items:center; justify-content:center; color:var(--lk-ink3); cursor:pointer; overflow:hidden; position:relative; transition:.2s var(--lk-ease); }
.lk-thumb:hover{ transform:scale(1.03); box-shadow:var(--lk-sh-md); }
.lk-thumb .lk-ic{ width:18px; height:18px; }
.lk-mini-sub{ font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--lk-ink3); margin:20px 0 9px; }

/* timeline */
.lk-tl{ position:relative; padding-left:6px; }
.lk-tl-item{ position:relative; padding:0 0 20px 28px; border-left:2px solid var(--lk-line); }
.lk-tl-item:last-child{ border-left-color:transparent; padding-bottom:0; }
.lk-tl-dot{ position:absolute; left:-9px; top:0; width:16px; height:16px; border-radius:50%; background:var(--lk-surface); border:2px solid var(--lk-teal); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 4px rgba(79,124,130,.08); }
.lk-tl-dot.done{ background:var(--lk-teal); }
.lk-tl-dot .lk-ic{ width:9px; height:9px; color:#fff; }
.lk-tl-t{ font-size:13.5px; font-weight:700; color:var(--lk-ink); }
.lk-tl-time{ font-size:11.5px; color:var(--lk-ink3); margin:3px 0 5px; }
.lk-tl-d{ font-size:13px; color:var(--lk-ink2); line-height:1.55; }

/* action table */
.lk-act{ display:grid; grid-template-columns:1.6fr 1fr .8fr .8fr 30px; gap:0; }
.lk-act .ah{ font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--lk-ink3); padding:8px 10px; }
.lk-act .ar{ padding:13px 10px; font-size:13px; border-top:1px solid var(--lk-line2); display:flex; align-items:center; gap:6px; color:var(--lk-ink); }
.lk-tag{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:8px; font:600 11.5px/1 inherit; }

/* solutions — premium cards */
.lk-sols{ display:flex; flex-direction:column; gap:11px; }
.lk-sol{ display:flex; align-items:flex-start; gap:13px; padding:14px 16px; background:linear-gradient(135deg,color-mix(in srgb,var(--lk-teal) 5%,#fff),var(--lk-bg)); border:1px solid var(--lk-line2); border-radius:16px; transition:border-color .22s var(--lk-ease),box-shadow .22s var(--lk-ease),transform .22s var(--lk-ease); }
.lk-sol:hover{ border-color:#CFE3E5; box-shadow:0 10px 26px rgba(11,46,51,.08); transform:translateY(-2px); }
.lk-sol .n{ width:30px; height:30px; flex-shrink:0; border-radius:10px; background:linear-gradient(135deg,#5C8A90,#356065); color:#fff; font:800 13px/1 'SF Mono',ui-monospace,monospace; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(53,96,101,.28); }
.lk-sol .st{ flex:1; font-size:14px; font-weight:600; color:var(--lk-ink); line-height:1.55; padding-top:5px; }
.lk-sol .sd2{ font-size:13px; color:var(--lk-ink2); line-height:1.5; margin-top:3px; }

/* files */
.lk-file{ display:flex; align-items:center; gap:13px; padding:12px 13px; border:1px solid var(--lk-line); border-radius:14px; margin-top:10px; transition:.2s var(--lk-ease); }
.lk-file:hover{ border-color:#D3E6E8; background:var(--lk-tert); transform:translateY(-1px); box-shadow:var(--lk-sh-sm); }
.lk-file .ft{ width:40px; height:40px; border-radius:11px; background:color-mix(in srgb,var(--lk-teal) 12%,#fff); color:var(--lk-teal); font:700 10px/1 inherit; display:flex; align-items:center; justify-content:center; flex-shrink:0; text-transform:uppercase; }
.lk-file .fn{ flex:1; min-width:0; }
.lk-file .fn .nm{ font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--lk-ink); }
.lk-file .fn .sz{ font-size:11.5px; color:var(--lk-ink3); margin-top:2px; }
.lk-file a, .lk-file .fx{ color:var(--lk-ink3); cursor:pointer; display:flex; padding:6px; border-radius:8px; transition:.16s; }
.lk-file a:hover{ color:var(--lk-teal); background:rgba(79,124,130,.1); }
.lk-file .fx:hover{ color:var(--lk-red); background:rgba(196,92,92,.1); }
.lk-drop{ display:flex; flex-direction:column; align-items:center; gap:9px; padding:26px; border:1.5px dashed rgba(79,124,130,.3); border-radius:16px; margin-top:14px; cursor:pointer; color:var(--lk-ink3); font-size:13px; font-weight:500; transition:.24s var(--lk-ease); text-align:center; background:rgba(235,245,246,.4); }
.lk-drop:hover{ border-color:var(--lk-teal); color:var(--lk-teal); background:var(--lk-tert); transform:translateY(-1px); }
.lk-drop .lk-ic{ width:22px; height:22px; }
.lk-addbtn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font:650 13.5px/1 inherit; letter-spacing:-.15px; color:var(--lk-teal);
  padding:13px 17px; margin-top:16px; border-radius:16px;
  border:1px solid rgba(79,124,130,.20);
  background:linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(233,244,245,.72) 100%);
  -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 2px rgba(11,46,51,.05), 0 10px 24px -14px rgba(11,46,51,.28), inset 0 1px 0 rgba(255,255,255,.75);
  transition:transform .22s var(--lk-ease), box-shadow .22s var(--lk-ease), border-color .22s var(--lk-ease), background .22s var(--lk-ease), color .22s var(--lk-ease);
  position:relative; -webkit-tap-highlight-color:transparent;
}
.lk-addbtn:hover{
  color:var(--lk-green);
  border-color:rgba(79,124,130,.34);
  background:linear-gradient(135deg, #fff 0%, rgba(224,240,241,.85) 100%);
  box-shadow:0 2px 4px rgba(11,46,51,.06), 0 16px 34px -16px rgba(58,107,112,.42), inset 0 1px 0 rgba(255,255,255,.9);
  transform:translateY(-1.5px);
}
.lk-addbtn:active{ transform:translateY(0) scale(.975); box-shadow:0 1px 2px rgba(11,46,51,.06), 0 6px 16px -12px rgba(11,46,51,.3), inset 0 1px 0 rgba(255,255,255,.7); }
.lk-addbtn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(79,124,130,.30), 0 10px 24px -14px rgba(11,46,51,.28); }
.lk-addbtn .lk-ic{ width:16px; height:16px; transition:transform .22s var(--lk-ease); }
.lk-addbtn:hover .lk-ic{ transform:scale(1.08) rotate(90deg); }
.lk-addbtn.lk-addbtn-soft:hover .lk-ic{ transform:scale(1.06) rotate(0); }
/* soft variant — secondary hierarchy (edit) */
.lk-addbtn-soft{ color:var(--lk-ink2); border-color:rgba(11,46,51,.10);
  background:linear-gradient(135deg, rgba(255,255,255,.94) 0%, rgba(244,250,251,.82) 100%); }
.lk-addbtn-soft .lk-ic{ color:var(--lk-ink3); }
.lk-addbtn-soft:hover{ color:var(--lk-ink); border-color:#CFE4E6;
  background:linear-gradient(135deg, #fff 0%, rgba(240,248,249,.9) 100%);
  box-shadow:0 2px 4px rgba(11,46,51,.06), 0 14px 30px -18px rgba(11,46,51,.34), inset 0 1px 0 rgba(255,255,255,.9); }
.lk-addbtn-soft:hover .lk-ic{ color:var(--lk-teal); }

/* status block (right) */
.lk-statusbox{ padding:2px 0; }
.lk-statusbox .big{
  display:flex; align-items:center; gap:11px; width:100%;
  font-size:15px; font-weight:700; letter-spacing:-.2px;
  padding:14px 16px; border-radius:14px;
  border:1px solid color-mix(in srgb,var(--lk-status-c,var(--lk-teal)) 22%,transparent);
}
.lk-statusbox .big .lk-st-ic{
  width:38px; height:38px; flex-shrink:0; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--lk-status-c,var(--lk-teal)) 16%,#fff);
}
.lk-statusbox .big .lk-st-ic .lk-ic{ width:19px; height:19px; }
.lk-kvline{ display:flex; align-items:center; justify-content:space-between; padding:13px 0; border-top:1px solid var(--lk-line2); font-size:13px; }
.lk-kvline:first-child{ border-top:0; }
.lk-kvline .k{ color:var(--lk-ink3); font-weight:500; } .lk-kvline .v{ font-weight:600; }

/* ════════════════  MODAL (form + mini)  ════════════════ */
.lk-back{ position:fixed; inset:0; z-index:5200; background:rgba(11,46,51,.42); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; visibility:hidden; transition:.26s var(--lk-ease); }
.lk-back.show{ opacity:1; visibility:visible; }
.lk-modal{ width:100%; max-width:680px; max-height:90vh; overflow-y:auto; background:var(--lk-surface); border-radius:22px; box-shadow:var(--lk-sh-lg); transform:translateY(14px) scale(.98); transition:.26s var(--lk-ease); }
.lk-back.show .lk-modal{ transform:none; }
.lk-modal.sm{ max-width:460px; }
.lk-modal-h{ display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--lk-line2); position:sticky; top:0; background:var(--lk-surface); border-radius:22px 22px 0 0; z-index:2; }
.lk-modal-h .t{ font-size:17px; font-weight:700; }
.lk-modal-b{ padding:22px 24px; }
.lk-modal-f{ display:flex; justify-content:flex-end; gap:10px; padding:16px 24px; border-top:1px solid var(--lk-line2); position:sticky; bottom:0; background:var(--lk-surface); border-radius:0 0 22px 22px; }
.lk-form{ display:grid; grid-template-columns:1fr 1fr; gap:15px 16px; }
.lk-field{ display:flex; flex-direction:column; gap:6px; }
.lk-field.full{ grid-column:1 / -1; }
.lk-field label{ font-size:12px; font-weight:600; color:var(--lk-ink2); }
.lk-field label b{ color:var(--lk-red); }
.lk-input,.lk-ta,.lk-fsel{ border:1px solid var(--lk-line); border-radius:10px; padding:10px 12px; font:400 13.5px/1.4 inherit; color:var(--lk-ink); background:var(--lk-surface); outline:0; transition:.18s var(--lk-ease); width:100%; }
.lk-fsel{ appearance:none; -webkit-appearance:none; cursor:pointer; }
.lk-input:focus,.lk-ta:focus,.lk-fsel:focus{ border-color:var(--lk-teal); box-shadow:0 0 0 3px rgba(79,124,130,.12); }
.lk-ta{ resize:vertical; min-height:78px; }

/* toast */
.lk-toasts{ position:fixed; bottom:24px; right:24px; z-index:6000; display:flex; flex-direction:column; gap:10px; }
.lk-toast{ display:flex; align-items:center; gap:10px; background:var(--lk-ink); color:#fff; padding:13px 17px; border-radius:13px; box-shadow:var(--lk-sh-lg); font-size:13.5px; font-weight:500; transform:translateX(120%); transition:.34s var(--lk-ease); }
.lk-toast.show{ transform:none; }
.lk-toast.ok{ background:#22585B; } .lk-toast.err{ background:#A24A4A; }
.lk-toast .lk-ic{ width:18px; height:18px; }

.lk-item-menu{ position:relative; }
.lk-menu-pop{ position:absolute; right:0; top:46px; background:var(--lk-surface); border:1px solid var(--lk-line); border-radius:13px; box-shadow:var(--lk-sh-md); padding:6px; min-width:170px; z-index:20; display:none; }
.lk-menu-pop.show{ display:block; }
.lk-menu-pop button{ display:flex; align-items:center; gap:9px; width:100%; border:0; background:transparent; cursor:pointer; padding:10px 12px; border-radius:9px; font:500 13.5px/1 inherit; color:var(--lk-ink2); text-align:left; }
.lk-menu-pop button:hover{ background:var(--lk-tert); }
.lk-menu-pop button.danger{ color:var(--lk-red); }
.lk-menu-pop button .lk-ic{ width:16px; height:16px; }

/* ════════════════  APPLE HIG REFINEMENT — banner · controls · rhythm  ════════════════ */

/* — Spacing rhythm & layered depth — */
.lk-grid2{ gap:22px; margin-top:26px; }
.lk-card + .lk-card{ margin-top:22px; }
.lk-title-row{ padding:18px 0 6px; }

/* — Top-right action controls (Redaktə et · Bağla · ⋯) — */
.lk-actions-pro{ gap:10px; }
.lk-actbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 18px; border-radius:15px;
  font:650 13.5px/1 inherit; letter-spacing:-.15px; cursor:pointer;
  border:1px solid transparent; white-space:nowrap; -webkit-tap-highlight-color:transparent;
  transition:transform .2s var(--lk-ease), box-shadow .2s var(--lk-ease), background .2s var(--lk-ease), border-color .2s var(--lk-ease), color .2s var(--lk-ease);
}
.lk-actbtn .lk-ic{ width:16px; height:16px; }
.lk-actbtn:active{ transform:scale(.97); }
.lk-actbtn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(79,124,130,.30); }
/* neutral / secondary */
.lk-actbtn-neutral{
  background:rgba(255,255,255,.72); color:var(--lk-ink2);
  border-color:rgba(11,46,51,.10);
  -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 2px rgba(11,46,51,.05), inset 0 1px 0 rgba(255,255,255,.6);
}
.lk-actbtn-neutral:hover{ background:#fff; color:var(--lk-ink); border-color:#CFE4E6;
  box-shadow:0 8px 22px -10px rgba(11,46,51,.28), inset 0 1px 0 rgba(255,255,255,.8); transform:translateY(-1.5px); }
/* prominent resolve (Bağla) — the key state change */
.lk-actbtn-resolve{
  background:linear-gradient(135deg,var(--lk-teal),var(--lk-green)); color:#fff;
  box-shadow:0 8px 20px -6px rgba(58,107,112,.45), inset 0 1px 0 rgba(255,255,255,.28);
}
.lk-actbtn-resolve .lk-ic{ color:#fff; }
.lk-actbtn-resolve:hover{ transform:translateY(-1.5px);
  box-shadow:0 14px 30px -8px rgba(58,107,112,.55), inset 0 1px 0 rgba(255,255,255,.34); }
/* reopen state — neutral outline */
.lk-actbtn-resolve.is-reopen{
  background:rgba(255,255,255,.72); color:var(--lk-ink2); border-color:rgba(11,46,51,.10);
  -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 2px rgba(11,46,51,.05), inset 0 1px 0 rgba(255,255,255,.6);
}
.lk-actbtn-resolve.is-reopen .lk-ic{ color:var(--lk-teal); }
.lk-actbtn-resolve.is-reopen:hover{ background:#fff; color:var(--lk-ink); border-color:#CFE4E6;
  box-shadow:0 8px 22px -10px rgba(11,46,51,.28), inset 0 1px 0 rgba(255,255,255,.8); transform:translateY(-1.5px); }
/* icon-only (⋯) — 44×44 touch target */
.lk-actbtn-icon{ width:44px; min-height:44px; padding:0; border-radius:14px;
  background:rgba(255,255,255,.72); color:var(--lk-ink2); border-color:rgba(11,46,51,.10);
  -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 2px rgba(11,46,51,.05), inset 0 1px 0 rgba(255,255,255,.6);
}
.lk-actbtn-icon .lk-ic{ width:18px; height:18px; }
.lk-actbtn-icon:hover{ background:#fff; color:var(--lk-ink); border-color:#CFE4E6;
  box-shadow:0 8px 22px -10px rgba(11,46,51,.28), inset 0 1px 0 rgba(255,255,255,.8); transform:translateY(-1.5px); }

/* — Live monitoring banner — */
.lk-livebanner{
  position:relative; display:flex; align-items:center; gap:15px;
  padding:18px 18px; border-radius:20px; overflow:hidden;
  border:1px solid transparent; isolation:isolate;
}
.lk-livebanner::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.55), transparent 60%); }
.lk-livebanner.is-resolved{
  background:linear-gradient(135deg, rgba(58,107,112,.11), rgba(47,164,106,.08));
  border-color:rgba(58,107,112,.22);
  box-shadow:0 10px 30px -18px rgba(58,107,112,.4), inset 0 1px 0 rgba(255,255,255,.5);
}
.lk-livebanner.is-active{
  background:linear-gradient(135deg, rgba(212,136,74,.15), rgba(196,92,92,.13));
  border-color:rgba(196,92,92,.26);
  box-shadow:0 12px 32px -16px rgba(196,92,92,.5), inset 0 1px 0 rgba(255,255,255,.55);
}
.lk-live-dot{ position:relative; width:14px; height:14px; border-radius:50%; flex-shrink:0; }
.lk-live-dot::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:rgba(255,255,255,.65); }
.lk-livebanner.is-active .lk-live-dot{ background:var(--lk-red); animation:lkPulse 2s var(--lk-ease) infinite; }
.lk-livebanner.is-resolved .lk-live-dot{ background:var(--lk-ok); }
@keyframes lkPulse{
  0%{ box-shadow:0 0 0 0 rgba(196,92,92,.55); }
  70%{ box-shadow:0 0 0 13px rgba(196,92,92,0); }
  100%{ box-shadow:0 0 0 0 rgba(196,92,92,0); }
}
.lk-live-main{ display:flex; flex-direction:column; gap:5px; flex:1; min-width:0; }
.lk-live-eyebrow{ font-size:10.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; }
.lk-livebanner.is-active .lk-live-eyebrow{ color:var(--lk-red); }
.lk-livebanner.is-resolved .lk-live-eyebrow{ color:var(--lk-green); }
.lk-live-status{ font-size:22px; font-weight:800; letter-spacing:-.5px; color:var(--lk-ink); line-height:1.12; }
.lk-live-badge{ width:44px; height:44px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.6); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7); }
.lk-live-badge .lk-ic{ width:20px; height:20px; }
.lk-livebanner.is-active .lk-live-badge{ color:var(--lk-red); }
.lk-livebanner.is-resolved .lk-live-badge{ color:var(--lk-green); }
.lk-live-meta{ margin-top:16px; }

@media(prefers-reduced-motion:reduce){
  .lk-livebanner.is-active .lk-live-dot{ animation:none; }
  .lk-addbtn, .lk-addbtn:hover, .lk-actbtn, .lk-actbtn:hover{ transition-duration:.001ms; }
  .lk-addbtn:hover, .lk-actbtn:hover{ transform:none; }
  .lk-addbtn:hover .lk-ic{ transform:none; }
}

@media(max-width:1100px){ .lk-stats{ grid-template-columns:repeat(3,1fr);} .lk-grid2{ grid-template-columns:1fr; } }
@media(max-width:760px){ .lk-stats{ grid-template-columns:repeat(2,1fr);} .lk-form{ grid-template-columns:1fr; } .lk-wrap{ padding:0 16px 40px;} .lk-grid{ --cols:120px 1.2fr 110px;} .lk-grid > *:nth-child(n+4){ display:none;} }

/* ── Rol əsaslı giriş: yazma düymələri yalnız ps_engineer üçün (default gizli) ── */
body:not(.role-ps-engineer) #lkRoot .lk-write{ display:none !important; }


/* ==================== 13. blok (orijinal sətir 48078) ==================== */
/* ════════════════  SCE MODULU — Apple-grade, winter-chill, premium  ════════════════ */
#sceRoot{
  --sc-bg:#F5FAFB; --sc-surface:#FFFFFF; --sc-tert:#EEF6F7; --sc-tint:#F3F9FA;
  --sc-ink:#0B2E33; --sc-ink2:#405C61; --sc-ink3:#7A959A;
  --sc-line:#E6F0F1; --sc-line2:#F0F6F7;
  --sc-teal:#4F7C82; --sc-teal2:#3A6B70;
  --sc-green:#2E9E63; --sc-red:#CB5D5D; --sc-amber:#D4884A;
  --sc-r:20px; --sc-r2:14px;
  --sc-sh-sm:0 1px 2px rgba(11,46,51,.05), 0 4px 14px -8px rgba(11,46,51,.10);
  --sc-sh-md:0 2px 6px rgba(11,46,51,.05), 0 14px 34px -18px rgba(11,46,51,.22);
  --sc-sh-lg:0 24px 60px -20px rgba(11,46,51,.28);
  --sc-ease:cubic-bezier(.22,.61,.36,1);
  --sc-spring:cubic-bezier(.34,1.56,.64,1);
}
#sceRoot .sc-ic{ width:16px; height:16px; flex-shrink:0; display:inline-block; vertical-align:middle; }

.sc-overlay{
  position:fixed; inset:0; z-index:4000; overflow-y:auto;
  background:
    radial-gradient(1200px 600px at 78% -8%, rgba(79,124,130,.06), transparent 60%),
    linear-gradient(180deg,#F6FBFC 0%,#EFF7F8 46%,#EAF3F4 100%);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif;
  color:var(--sc-ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  opacity:0; visibility:hidden; transform:scale(.99) translateY(6px);
  transition:opacity .38s var(--sc-ease), transform .42s var(--sc-ease), visibility .42s;
}
.sc-overlay.show{ opacity:1; visibility:visible; transform:none; }
/* ── Geniş, sola dayanan layout · az yan marjin ── */
.sc-wrap{ max-width:none; width:100%; margin:0; padding:10px 44px 72px; }

/* ── Üst sətir ── */
.sc-topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0 4px; flex-wrap:wrap-reverse; }
.sc-crumb{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--sc-ink3); font-weight:500; }
.sc-crumb a{ color:var(--sc-teal); cursor:pointer; font-weight:600; text-decoration:none; transition:.16s; }
.sc-crumb a:hover{ color:var(--sc-teal2); }
.sc-crumb span{ opacity:.5; }
.sc-pageback{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  border:1px solid rgba(11,46,51,.07); background:rgba(255,255,255,.70);
  -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  color:var(--sc-ink); font:600 13px/1 inherit; letter-spacing:-.1px;
  padding:10px 16px 10px 12px; border-radius:980px;
  box-shadow:0 1px 2px rgba(11,46,51,.05), 0 6px 18px -8px rgba(11,46,51,.16);
  transition:transform .26s var(--sc-ease), box-shadow .26s var(--sc-ease), background .26s var(--sc-ease); white-space:nowrap;
}
.sc-pageback:hover{ background:#fff; box-shadow:0 2px 4px rgba(11,46,51,.07), 0 12px 28px -8px rgba(11,46,51,.24); transform:translateY(-1px); }
.sc-pageback:active{ transform:translateY(0) scale(.97); }
.sc-pageback .sc-ic{ color:var(--sc-teal); transition:transform .26s var(--sc-ease); }
.sc-pageback:hover .sc-ic{ transform:translateX(-3px); }

/* ── Başlıq ── */
.sc-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; padding:10px 0 2px; flex-wrap:wrap; }
.sc-h1{ font-size:30px; font-weight:800; letter-spacing:-.8px; background:linear-gradient(180deg,#0B2E33,#20474C); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.sc-sub{ font-size:14.5px; color:var(--sc-ink3); margin-top:6px; font-weight:450; }
.sc-actions{ display:flex; align-items:center; gap:10px; }

/* ── Düymələr ── */
.sc-btn{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:1px solid transparent; font:600 13.5px/1 inherit; letter-spacing:-.1px; padding:11px 17px; border-radius:13px; transition:transform .2s var(--sc-ease), box-shadow .2s var(--sc-ease), background .2s var(--sc-ease), border-color .2s var(--sc-ease); white-space:nowrap; }
.sc-btn:active{ transform:scale(.97); }
.sc-btn-primary{ background:linear-gradient(135deg,var(--sc-teal),var(--sc-teal2)); color:#fff; box-shadow:0 6px 16px rgba(58,107,112,.28); }
.sc-btn-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(58,107,112,.36); }
.sc-btn-ghost{ background:rgba(255,255,255,.72); -webkit-backdrop-filter:saturate(180%) blur(12px); backdrop-filter:saturate(180%) blur(12px); color:var(--sc-ink2); border-color:rgba(11,46,51,.08); box-shadow:0 1px 2px rgba(11,46,51,.05); }
.sc-btn-ghost:hover{ background:#fff; border-color:#D3E6E8; color:var(--sc-ink); box-shadow:0 6px 18px -8px rgba(11,46,51,.20); transform:translateY(-1px); }
.sc-btn .sc-ic{ color:var(--sc-teal); }
.sc-btn-primary .sc-ic{ color:#fff; }

/* ── Panel ── */
.sc-panel{ background:var(--sc-surface); border:1px solid var(--sc-line); border-radius:var(--sc-r); margin-top:22px; padding:8px 10px 12px; box-shadow:var(--sc-sh-md); overflow:hidden; }

/* ── Alətlər sətri ── */
.sc-tools{ display:flex; align-items:center; flex-wrap:wrap; gap:11px; padding:14px 14px 4px; }
.sc-search{ flex:1; min-width:260px; display:flex; align-items:center; gap:10px; border:1px solid var(--sc-line); border-radius:13px; padding:12px 15px; background:var(--sc-tint); transition:.22s var(--sc-ease); }
.sc-search:focus-within{ border-color:var(--sc-teal); background:#fff; box-shadow:0 0 0 4px rgba(79,124,130,.10); }
.sc-search .sc-ic{ color:var(--sc-ink3); }
.sc-search:focus-within .sc-ic{ color:var(--sc-teal); }
.sc-search input{ border:0; outline:0; flex:1; font:450 14.5px/1.2 inherit; color:var(--sc-ink); background:transparent; }
.sc-search input::placeholder{ color:var(--sc-ink3); }
.sc-sel-wrap{ position:relative; }
.sc-sel{ appearance:none; -webkit-appearance:none; cursor:pointer; border:1px solid var(--sc-line); border-radius:13px; padding:12px 36px 12px 15px; font:550 13px/1 inherit; color:var(--sc-ink2); background:var(--sc-tint); transition:.22s var(--sc-ease); min-width:180px; }
.sc-sel:hover{ border-color:#D0E4E6; background:#fff; }
.sc-sel:focus{ outline:0; border-color:var(--sc-teal); box-shadow:0 0 0 4px rgba(79,124,130,.10); }
.sc-sel.active{ border-color:var(--sc-teal); color:var(--sc-ink); font-weight:650; background:#fff; }
.sc-sel-wrap::after{ content:""; position:absolute; right:15px; top:50%; width:8px; height:8px; border-right:2px solid var(--sc-ink3); border-bottom:2px solid var(--sc-ink3); transform:translateY(-70%) rotate(45deg); pointer-events:none; transition:.2s; }
.sc-sel-wrap:hover::after{ border-color:var(--sc-teal); }
.sc-reset{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:1px solid var(--sc-line); border-radius:13px; padding:12px 16px; font:600 13px/1 inherit; color:var(--sc-ink2); background:var(--sc-tint); transition:.22s var(--sc-ease); }
.sc-reset:hover{ border-color:#D0E4E6; color:var(--sc-teal); background:#fff; transform:translateY(-1px); box-shadow:0 6px 16px -10px rgba(11,46,51,.28); }
.sc-reset .sc-ic{ color:currentColor; }

/* ── Cədvəl başlığı ── */
.sc-tbl-title{ font-size:13px; font-weight:700; letter-spacing:.2px; padding:18px 18px 8px; color:var(--sc-ink2); }
.sc-tbl-title b{ color:var(--sc-teal); font-weight:800; }

/* ── Grid ── */
.sc-grid{ --cols:minmax(0,2.4fr) 200px minmax(0,1.1fr) 40px; display:grid; grid-template-columns:var(--cols); align-items:center; gap:16px; }
.sc-thead{ padding:8px 18px 12px; font-size:10.5px; font-weight:700; letter-spacing:.7px; color:var(--sc-ink3); text-transform:uppercase; }
.sc-list{ padding:0 6px; }
.sc-row{ padding:14px 12px; margin:2px 0; border-radius:16px; cursor:pointer; position:relative; transition:background .2s var(--sc-ease), box-shadow .24s var(--sc-ease), transform .24s var(--sc-ease); }
.sc-row::after{ content:""; position:absolute; left:12px; right:12px; bottom:-2px; height:1px; background:var(--sc-line2); }
.sc-row:last-child::after{ display:none; }
.sc-row:hover{ background:linear-gradient(180deg,#fff,var(--sc-tint)); box-shadow:0 1px 2px rgba(11,46,51,.04), 0 12px 30px -18px rgba(11,46,51,.22); transform:translateY(-1px); }
.sc-row:hover::after{ opacity:0; }
.sc-row:active{ transform:translateY(0) scale(.996); }

.sc-namecell{ display:flex; align-items:center; gap:14px; min-width:0; }
.sc-nameic{ width:44px; height:44px; border-radius:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, color-mix(in srgb,var(--sc-teal) 14%,#fff), color-mix(in srgb,var(--sc-teal) 7%,#fff));
  color:var(--sc-teal); box-shadow:inset 0 0 0 1px rgba(79,124,130,.12); transition:.24s var(--sc-spring); }
.sc-row:hover .sc-nameic{ transform:scale(1.05); box-shadow:inset 0 0 0 1px rgba(79,124,130,.20), 0 6px 16px -8px rgba(79,124,130,.4); }
.sc-nameic .sc-ic{ width:21px; height:21px; }
.sc-nametext{ min-width:0; }
.sc-name{ font-size:14.5px; font-weight:650; color:var(--sc-ink); letter-spacing:-.2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.35; }
.sc-nameid{ display:inline-flex; align-items:center; gap:6px; margin-top:4px; font:600 11.5px/1 'SF Mono',ui-monospace,monospace; color:var(--sc-ink3); letter-spacing:.2px; }
.sc-nameid .lbl{ font:700 9px/1 inherit; letter-spacing:.6px; text-transform:uppercase; color:#A9C3C7; background:var(--sc-tert); padding:3px 6px; border-radius:6px; }

/* ── Apple-style status pill (premium: ağ well + gradient orb + ayırıcı) ── */
.sc-pill{ display:inline-flex; align-items:center; gap:0; padding:4px 15px 4px 5px; border-radius:999px;
  font:650 12.5px/1 inherit; letter-spacing:-.15px; white-space:nowrap; border:1px solid transparent;
  position:relative; isolation:isolate;
  transition:transform .26s var(--sc-spring), box-shadow .3s var(--sc-ease), background .3s var(--sc-ease); }
.sc-pill::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0)); opacity:.6; }
/* ağ dairəvi yuva */
.sc-pill .ico{ width:25px; height:25px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:#fff; box-shadow:0 2px 5px rgba(11,46,51,.10), inset 0 0 0 1px rgba(11,46,51,.04); }
/* rəngli gradient orb */
.sc-pill .orb{ width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  position:relative; box-shadow:inset 0 1px 1px rgba(255,255,255,.45), inset 0 -1px 2px rgba(0,0,0,.12); }
.sc-pill .orb svg{ width:11px; height:11px; color:#fff; stroke-width:3.2; filter:drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
/* ayırıcı xətt */
.sc-pill .sep{ width:1px; height:15px; margin:0 12px 0 11px; border-radius:1px; flex-shrink:0; }
.sc-pill .txt{ padding-right:1px; }

.sc-pill.yes{ color:#1C7C43; background:linear-gradient(135deg,#F1FBF4,#E6F6EC); border-color:#C9E9D2;
  box-shadow:0 1px 2px rgba(46,158,99,.08), 0 10px 22px -12px rgba(46,158,99,.5); }
.sc-pill.yes .orb{ background:linear-gradient(160deg,#40D46E 0%,#28AC59 55%,#1F9A4E 100%); box-shadow:inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 2px rgba(0,60,25,.25), 0 2px 5px rgba(31,154,78,.45); }
.sc-pill.yes .sep{ background:linear-gradient(180deg,transparent,#BBE3C6,transparent); }

.sc-pill.no{ color:#B23A34; background:linear-gradient(135deg,#FEF4F2,#FCEAE8); border-color:#F4CFCB;
  box-shadow:0 1px 2px rgba(203,93,93,.08), 0 10px 22px -12px rgba(203,93,93,.45); }
.sc-pill.no .orb{ background:linear-gradient(160deg,#FF6A5A 0%,#EE4638 55%,#DB3A2D 100%); box-shadow:inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 2px rgba(80,10,5,.25), 0 2px 5px rgba(219,58,45,.42); }
.sc-pill.no .sep{ background:linear-gradient(180deg,transparent,#F0C4BF,transparent); }

.sc-pill.na{ color:#5E7B80; background:linear-gradient(135deg,#F4F9FA,#ECF3F4); border-color:var(--sc-line);
  box-shadow:0 1px 2px rgba(11,46,51,.05), 0 8px 18px -12px rgba(11,46,51,.28); }
.sc-pill.na .orb{ background:linear-gradient(160deg,#C3D6D9,#9FB9BD); box-shadow:inset 0 1px 1px rgba(255,255,255,.45), 0 2px 4px rgba(120,150,155,.35); }
.sc-pill.na .sep{ background:linear-gradient(180deg,transparent,#D3E2E4,transparent); }

.sc-row:hover .sc-pill{ transform:translateY(-1px) scale(1.015); box-shadow:0 2px 4px rgba(11,46,51,.06), 0 16px 30px -14px rgba(11,46,51,.4); }
.sc-row:hover .sc-pill.yes{ box-shadow:0 2px 4px rgba(46,158,99,.12), 0 16px 30px -14px rgba(46,158,99,.6); }
.sc-row:hover .sc-pill.no{ box-shadow:0 2px 4px rgba(203,93,93,.12), 0 16px 30px -14px rgba(203,93,93,.55); }

/* ── SCE Group ── */
.sc-group{ min-width:0; }
.sc-code{ display:inline-flex; align-items:center; border:1px solid var(--sc-line); border-radius:9px; padding:6px 11px; font:650 12px/1 'SF Mono',ui-monospace,monospace; color:var(--sc-ink2); background:linear-gradient(180deg,#fff,var(--sc-tint)); letter-spacing:.3px; box-shadow:0 1px 2px rgba(11,46,51,.04); }
.sc-dash{ color:#BFD6D9; font-weight:600; padding-left:4px; }

.sc-chev{ display:flex; justify-content:flex-end; align-items:center; color:#B4CBCF; }
.sc-chev .sc-ic{ width:19px; height:19px; transition:transform .24s var(--sc-spring), color .2s; }
.sc-row:hover .sc-chev .sc-ic{ transform:translateX(3px); color:var(--sc-teal); }

/* ── Boş / yüklənir ── */
.sc-empty{ text-align:center; padding:76px 20px; color:var(--sc-ink3); }
.sc-empty .ei{ width:64px; height:64px; margin:0 auto 18px; border-radius:20px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--sc-tert),#fff); box-shadow:inset 0 0 0 1px var(--sc-line); }
.sc-empty .ei .sc-ic{ width:30px; height:30px; color:#B4CBCF; }
.sc-empty h4{ font-size:16.5px; font-weight:700; color:var(--sc-ink2); margin-bottom:7px; }
.sc-empty p{ font-size:13.5px; }
.sc-loading{ padding:80px; text-align:center; color:var(--sc-ink3); font-size:14px; }
.sc-spin{ width:30px; height:30px; margin:0 auto 16px; border:3px solid var(--sc-line); border-top-color:var(--sc-teal); border-radius:50%; animation:sc-spin .8s linear infinite; }
@keyframes sc-spin{ to{ transform:rotate(360deg); } }

/* ── Səhifələmə ── */
.sc-pager{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 16px 8px; border-top:1px solid var(--sc-line2); margin-top:12px; flex-wrap:wrap; }
.sc-pager .info{ font-size:13px; color:var(--sc-ink3); font-weight:500; }
.sc-pager .info b{ color:var(--sc-ink2); font-weight:700; }
.sc-pages{ display:flex; align-items:center; gap:5px; }
.sc-pg{ min-width:36px; height:36px; padding:0 9px; border-radius:11px; border:0; cursor:pointer; background:transparent; color:var(--sc-ink2); font:650 13.5px/1 inherit; display:flex; align-items:center; justify-content:center; transition:.16s var(--sc-ease); }
.sc-pg:hover:not(:disabled){ background:var(--sc-tert); transform:translateY(-1px); }
.sc-pg.on{ background:linear-gradient(135deg,var(--sc-teal),var(--sc-teal2)); color:#fff; box-shadow:0 6px 16px -6px rgba(58,107,112,.5); }
.sc-pg:disabled{ opacity:.35; cursor:default; }
.sc-perpage{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--sc-ink3); font-weight:500; }

/* ════════════════  DETAL SƏHİFƏSİ  ════════════════ */
.sc-hero{
  position:relative; overflow:hidden; margin-top:20px;
  background:linear-gradient(135deg,#FFFFFF 0%,#F1F8F9 100%);
  border:1px solid rgba(11,46,51,.06); border-radius:24px; padding:28px 30px;
  box-shadow:var(--sc-sh-md);
}
.sc-hero::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg, var(--sc-accent,var(--sc-teal)), color-mix(in srgb,var(--sc-accent,var(--sc-teal)) 55%,#000)); }
.sc-hero::after{ content:""; position:absolute; right:-60px; top:-60px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb,var(--sc-accent,var(--sc-teal)) 9%,transparent), transparent 70%); pointer-events:none; }
.sc-hero-top{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.sc-hero-l{ display:flex; align-items:center; gap:18px; min-width:0; }
.sc-hero-ic{ width:60px; height:60px; border-radius:17px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, color-mix(in srgb,var(--sc-accent,var(--sc-teal)) 16%,#fff), color-mix(in srgb,var(--sc-accent,var(--sc-teal)) 8%,#fff));
  color:var(--sc-accent,var(--sc-teal)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sc-accent,var(--sc-teal)) 20%,transparent), 0 10px 24px -12px color-mix(in srgb,var(--sc-accent,var(--sc-teal)) 60%,transparent); }
.sc-hero-ic .sc-ic{ width:29px; height:29px; }
.sc-hero-name{ font-size:25px; font-weight:800; letter-spacing:-.6px; color:var(--sc-ink); line-height:1.22; }
.sc-hero-id{ font:650 13px/1 'SF Mono',ui-monospace,monospace; color:var(--sc-ink3); margin-top:9px; display:inline-flex; align-items:center; gap:8px; }
.sc-hero-id .lbl{ font:700 9.5px/1 -apple-system,sans-serif; letter-spacing:.7px; text-transform:uppercase; color:#9CBBC0; }
.sc-hero-badges{ position:relative; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sc-hero .sc-pill{ padding:6px 20px 6px 6px; font-size:14px; }
.sc-hero .sc-pill .ico{ width:34px; height:34px; }
.sc-hero .sc-pill .orb{ width:24px; height:24px; }
.sc-hero .sc-pill .orb svg{ width:14px; height:14px; }
.sc-hero .sc-pill .sep{ height:19px; margin:0 16px 0 14px; }

.sc-cards{ margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.sc-card{
  position:relative; background:var(--sc-surface);
  border:1px solid rgba(11,46,51,.06); border-radius:22px; padding:24px 26px;
  box-shadow:var(--sc-sh-sm);
  transition:box-shadow .34s var(--sc-ease), transform .34s var(--sc-ease), border-color .34s var(--sc-ease);
}
.sc-card:hover{ box-shadow:var(--sc-sh-md); border-color:rgba(11,46,51,.09); transform:translateY(-2px); }
.sc-card.span{ grid-column:1 / -1; }
.sc-card.accent{ background:linear-gradient(135deg, color-mix(in srgb,var(--sc-teal) 5%,#fff), #fff); border-color:rgba(79,124,130,.16); }
.sc-card-h{ display:flex; align-items:center; gap:13px; font-size:15px; font-weight:750; letter-spacing:-.2px; margin-bottom:20px; color:var(--sc-ink); }
.sc-card-h-ic{ width:36px; height:36px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, color-mix(in srgb,var(--sc-teal) 13%,#fff), color-mix(in srgb,var(--sc-teal) 6%,#fff)); box-shadow:inset 0 0 0 1px rgba(79,124,130,.12); }
.sc-card-h-ic .sc-ic{ width:18px; height:18px; color:var(--sc-teal); }
.sc-card.accent .sc-card-h-ic{ background:linear-gradient(135deg,var(--sc-teal),var(--sc-teal2)); box-shadow:0 6px 16px -6px rgba(58,107,112,.5); }
.sc-card.accent .sc-card-h-ic .sc-ic{ color:#fff; }

.sc-kv{ display:grid; grid-template-columns:1fr 1fr; gap:22px 28px; }
.sc-kv .k{ font-size:10px; font-weight:700; letter-spacing:.55px; text-transform:uppercase; color:var(--sc-ink3); }
.sc-kv .v{ font-size:14.5px; font-weight:600; margin-top:7px; color:var(--sc-ink); letter-spacing:-.1px; word-break:break-word; line-height:1.4; }
.sc-kv .v.empty{ color:#C0D4D7; font-weight:500; }
.sc-kv .v.mono{ font-family:'SF Mono',ui-monospace,monospace; font-size:13px; letter-spacing:.2px; }
.sc-kv .full{ grid-column:1 / -1; }
.sc-kv .full .v{ font-weight:500; color:var(--sc-ink2); line-height:1.6; }

/* ── Rol əsaslı giriş ── */
body:not(.role-ps-engineer) #sceRoot .sc-write{ display:none !important; }

/* ── Responsiv ── */
@media(max-width:1080px){
  .sc-cards{ grid-template-columns:1fr; }
  .sc-card.span{ grid-column:auto; }
  .sc-kv{ grid-template-columns:1fr 1fr; }
}
@media(max-width:760px){
  .sc-wrap{ padding:6px 20px 56px; }
  .sc-grid{ --cols:minmax(0,1fr) 150px 40px; gap:12px; }
  .sc-grid > *:nth-child(3){ display:none; }
  .sc-h1{ font-size:25px; }
  .sc-hero-name{ font-size:21px; }
}
@media(max-width:520px){
  .sc-wrap{ padding:4px 14px 48px; }
  .sc-grid{ --cols:minmax(0,1fr) 40px; }
  .sc-grid > *:nth-child(2){ display:none; }
  .sc-kv, .sc-kv.two{ grid-template-columns:1fr; }
}


/* ==================== 14. blok (orijinal sətir 51705) ==================== */
/* ==== PSV modulu — ESDB dizaynı üzərinə yalnız fərqlər ==== */

/* 4 stat kartı (ESDB-də 3-dür) */
.psvb-scope .esdb-stats{grid-template-columns:repeat(4,1fr)}
@media(max-width:1180px){.psvb-scope .esdb-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.psvb-scope .esdb-stats{grid-template-columns:1fr}}

/* Yaşıl ton — "Yoxlanıb" kartı üçün (ESDB-də yalnız amber var) */
.esdb-stat.is-green::after{background:radial-gradient(circle,var(--esdb-green-soft) 0%,transparent 68%)}
.esdb-stat.is-green .esdb-stat-ico{background:var(--esdb-green-soft);color:var(--esdb-green)}
.esdb-stat.is-green .esdb-stat-label{color:#1F7A50}
.esdb-stat.is-green .esdb-stat-val{color:var(--esdb-green)}
.esdb-stat.is-green.selected{border-color:rgba(46,158,104,.30);box-shadow:0 0 0 3px rgba(46,158,104,.10),var(--esdb-shadow-1)}
.esdb-stat.is-green.selected .esdb-stat-check{background:var(--esdb-green)}
.esdb-stat.is-teal.selected{border-color:rgba(79,124,130,.34);box-shadow:0 0 0 3px rgba(79,124,130,.10),var(--esdb-shadow-1)}
.esdb-stat.is-teal.selected .esdb-stat-check{background:var(--esdb-teal)}

/* Halqa yaşıl (yoxlanma faizi müsbət göstəricidir) */
.psvb-ring .esdb-ring-bg{background:conic-gradient(var(--esdb-green) calc(var(--pct,0)*1%), rgba(79,124,130,.13) 0)}
.psvb-ring .esdb-ring-hole{color:var(--esdb-green)}

/* Vəziyyət nöqtəsi — 3 pillə */
.psvb-dot{width:9px;height:9px;border-radius:50%;display:block;margin:0 auto;background:var(--esdb-green);
  box-shadow:0 0 0 3px var(--esdb-green-soft)}
.psvb-dot.soon{background:var(--esdb-amber);box-shadow:0 0 0 3px var(--esdb-amber-soft)}
.psvb-dot.over{background:#C4574F;box-shadow:0 0 0 3px rgba(196,87,79,.14)}
.psvb-dot.off {background:#9AAEB4;box-shadow:0 0 0 3px rgba(154,174,180,.16)}

/* Vəziyyət çipi (cədvəl + detal) */
.psvb-chip{display:inline-flex;align-items:center;gap:.34rem;padding:.2rem .55rem;border-radius:8px;
  font-size:.7rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap;border:1px solid transparent}
.psvb-chip i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block;flex-shrink:0}
.psvb-chip.ok  {background:var(--esdb-green-soft);color:#1F7A50;border-color:rgba(46,158,104,.24)}
.psvb-chip.soon{background:var(--esdb-amber-soft);color:var(--esdb-amber-deep);border-color:var(--esdb-amber-line)}
.psvb-chip.over{background:rgba(196,87,79,.10);color:#9B2F28;border-color:rgba(196,87,79,.26)}
.psvb-chip.off {background:rgba(154,174,180,.12);color:#5B7078;border-color:rgba(154,174,180,.28)}

/* Ədədi sütunlar — digər sütunlarla eyni sol kənara oturur, rəqəmlər tabular */
.psvb-num{text-align:left;font-variant-numeric:tabular-nums;white-space:nowrap}
.psvb-scope .psvb-table thead th.num{text-align:left}

/* Redaktə forması — 2 sütunlu şəbəkə */
.psvb-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem .9rem}
.psvb-form .full{grid-column:1/-1}
.psvb-fl{display:flex;flex-direction:column;gap:.32rem;min-width:0}
.psvb-fl>span{font-size:.7rem;font-weight:700;color:var(--esdb-ink-3)}
.psvb-fl select.esdb-in{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A959A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;background-size:14px;padding-right:2rem}

/* Silmə düyməsi */
.esdb-btn.danger{background:#B23B33;border-color:#B23B33;color:#fff}
.esdb-btn.danger:hover{background:#9B2F28;border-color:#9B2F28}
.esdb-btn.danger-armed{background:#7E241E;border-color:#7E241E;color:#fff;animation:psvbPulse 1s ease-in-out infinite}
@keyframes psvbPulse{0%,100%{opacity:1}50%{opacity:.72}}

/* Yalnız oxuma rejimində məlumat verən lent */
.psvb-ro{display:flex;align-items:center;gap:.5rem;padding:.55rem .8rem;border-radius:12px;
  background:var(--esdb-teal-soft);border:1px solid var(--esdb-line);
  font-size:.74rem;font-weight:600;color:var(--esdb-ink-2);margin-bottom:.9rem}
.psvb-ro svg{width:15px;height:15px;flex-shrink:0;color:var(--esdb-teal)}