@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2'),
         url('fonts/JetBrainsMono-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/JetBrainsMono-Bold.woff2') format('woff2'),
         url('fonts/JetBrainsMono-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

/* =============================================================================
   SCROLLBAR STYLING - CROSS-BROWSER COMPATIBILITY
   =============================================================================
   
   FIREFOX/ARC LIMITATIONS:
   - scrollbar-width: Only accepts 'auto', 'thin', 'none' (NOT pixel values)
   - scrollbar-color: Works (thumb background)
   - NO support for custom shapes, borders, or squared corners
   - Firefox scrollbars are always rounded by the OS
   
   WEBKIT BROWSERS (Chrome, Safari, Edge):
   - Full customization with ::-webkit-scrollbar pseudo-elements
   - Custom widths, colors, shapes, borders supported
   - Can force squared corners with border-radius: 0
   
   RESULT: Colors work everywhere, but thick squared scrollbars only in WebKit
   ============================================================================= */

/* width */
::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: var(--nord2); 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--nord4); 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--nord13); 
  }

:root {
  --bg-dark: #2E3440;
  --bg-light: #3B4252;
  --fg: #E5E9F0;
  --accent: #5E81AC;
  --danger: #BF616A;
  --success: #A3BE8C;
  --warn: #EBCB8B;
  --muted: #4C566A;
  --muted-alt: #434C5E;
  --info: #88C0D0;
  --highlight: #ECEFF4;
  --nord1: #2E3440;
  --nord2: #3B4252;
  --nord3: #434C5E;
  --nord4: #4C566A;
  --nord5: #D8DEE9;
  --nord6: #ECEFF4;
  --nord7: #8FBCBB;
  --nord8: #88C0D0;
  --nord9: #81A1C1;
  --nord10: #5E81AC;
  --nord11: #BF616A;
  --nord12: #D08770;
  --nord13: #EBCB8B;
  --nord14: #A3BE8C;
  --nord15: #B48EAD;
  --notification-easing: cubic-bezier(0.33, 0.00, 0.00, 1.00);
  --notification-duration: 0.5s;
}

  
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }
  
      body {
          font-family: 'JetBrains Mono', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
          background: #2E3440;
          min-height: 100vh;
          padding: 20px;

      }
      
             /* Mobile body override */
       @media (max-width: 1024px) {
           body {
               padding: 0;
               margin: 0;
               background: #2E3440;
               /* Prevent bounce scrolling on iOS */
               overscroll-behavior: none;
               /* Prevent zoom on input focus */
               touch-action: manipulation;
           }
       }
  
      .container {
          max-width: 1920px;
          width: 100%;
          margin: 0 auto;
          background: #3B4252;
          box-shadow: 0 8px 16px rgba(0,0,0,0.07);
          overflow: hidden;
          display: flex;
          flex-direction: column;
      }
  
      .header {
          background: #3B4252;
          color: #E5E9F0;
          padding: 20px 20px 0px;
          text-align: left;
          display: flex;
          align-items: center;
          gap: 5px;
      }
  
      .header-content {
          display: flex;
          flex-direction: column;
          gap: 4px;
      }
  
      .logo {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100px;
          height: 100px;
      }
  
      .logo canvas {
          width: 100%;
          height: 100%;
          object-fit: contain;
      }
  
      .header h1 {
          font-size: 39px;
          font-family: 'Goldman', 'JetBrains Mono', monospace;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          color: #EBCB8B;
      }
  
      .header p {
          opacity: 0.9;
          font-size: 16px;
          color:#EBCB8B;
          margin-left: 5px;
      }
  
      .content {
          padding: 15px 0px 0px;
          display: flex;
          flex-direction: column;

      }
  
      .main-content {
          display: flex;
          flex-wrap: wrap;
      }
  
      .left-panel {
          flex: 1;
          min-width: 300px;
          display: flex;
          flex-direction: column;
          gap: 10px;
          position: relative;
      }
  
      .right-panel {
          flex: 5;
          min-width: 300px;
      }
  
      
  
      .btn {
          flex: 1;
          padding: 15px;
          border: none;
          font-size: 14px;
          font-weight: 600;
        
          transition: all 0.2s ease;
          font-family: 'JetBrains Mono', monospace;
          text-align: left;
          /* Prevent cursor flickering */
          position: relative;
          z-index: 1;
      }
  
      .btn-add {
          background: #4C566A;
          color: #E5E9F0;
        
      }
  
      .btn-add:hover {
          background: #5E81AC;
          color: #ECEFF4;
        
      }
  
      .btn-remove {
          background: #BF616A;
          color: #E5E9F0;
        
      }
  
      .btn-remove:hover {
          background: #D08770;
          color: #ECEFF4;
        
      }

      .close-btn {
          background: #4C566A;
          color: #E5E9F0;
      }

      .close-btn:hover {
          background: #E5E9F0;
          color: #4C566A;
          transform: none !important;
      }

      .cancel-btn {
          background: #4C566A;
          color: #E5E9F0;
      }

      .cancel-btn:hover {
          background: #E5E9F0;
          color: #4C566A;
          transform: none !important;
      }

      .json-btn {
          background: #4C566A;
          color: #E5E9F0;
      }

      .json-btn:hover {
          background: #E5E9F0;
          color: #4C566A;
          transform: none !important;
      }

      .csv-btn {
          background: #4C566A;
          color: #E5E9F0;
      }

      .csv-btn:hover {
          background: #E5E9F0;
          color: #4C566A;
          transform: none !important;
      }
  
      .inventory-list {
          background: #2E3440;
          padding: 0px 10px;
          max-height: 600px;
          overflow-y: auto;
          position: relative;
          contain: layout paint;
          content-visibility: auto;
          contain-intrinsic-size: 1px 5000px;
      }
  
      .inventory-header {
          display: flex;
          align-items: center;
          margin-bottom: 15px;
          flex-wrap: wrap;
          gap: 10px;
          width: 100%;
          position: sticky;
          top: 0;
          background: #434C5E;
          padding: 10px 14px;
          z-index: 10;
          border-bottom: 2px solid #4C566A;
          box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.2);
          margin: 0;
      }
  
      .inventory-header h3 {
          color: #E5E9F0;
          margin: 0;
          font-size: 20px;
      }
  
          .manage-projects-btn {
        background: #4C566A;
        color: #E5E9F0;
        border: none;
        padding: 8px 12px;
        font-size: 13px;
      
        transition: all 0.2s ease;
        font-family: 'JetBrains Mono', monospace;
        white-space: nowrap;
        /* iOS Safari touch fixes */
        -webkit-tap-highlight-color: rgba(94, 129, 172, 0.3);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        touch-action: manipulation;
        /* Prevent cursor flickering */
        position: relative;
        z-index: 1;
    }

    .manage-projects-btn:hover,
    .manage-projects-btn:active {
        background: #5E81AC;
        color: #ECEFF4;
      
    }
  
      .inventory-controls {
          display: flex;
          gap: 10px;
          align-items: center;
          justify-content: flex-end;
      }
  
      .search-input {
          padding: 8px 12px;
          border: 1px solid #4C566A;
          font-size: 14px;
          background: #2E3440;
          color: #E5E9F0;
          min-width: 200px;
          font-family: 'JetBrains Mono', monospace;
          width: 100%;
          cursor: text;
      }
  
      .search-input:focus {
          outline: none;
          border-color: #88C0D0;
          box-shadow: 0 0 0 2px rgba(136, 192, 208, 0.2);
          cursor: text;
      }
  
      .sort-dropdown {
          padding: 8px 12px;
          border: 1px solid #4C566A;
          font-size: 14px;
          background: #2E3440;
          color: #E5E9F0;
        
          min-width: 150px;
          font-family: 'JetBrains Mono', monospace;
          text-align: left;
          -webkit-appearance: none;
          -moz-appearance: none;
          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='%23E5E9F0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
          background-repeat: no-repeat;
          background-position: right 8px center;
          background-size: 16px;
          padding-right: 32px;
          /* Prevent cursor flickering */
          position: relative;
          z-index: 1;
      }
  
      .sort-dropdown:focus {
          outline: none;
          border-color: #88C0D0;
          box-shadow: 0 0 0 2px rgba(136, 192, 208, 0.2);
        
      }
  
      /* Safari-specific fixes */
      @supports (-webkit-touch-callout: none) {
          .sort-dropdown {
              background-color: #2E3440;
              border-radius: 0;
            
          }
          
          .sort-dropdown option {
              background-color: #2E3440;
              color: #E5E9F0;
          }
      }
  
      /* Firefox-specific fixes */
      @-moz-document url-prefix() {
          .sort-dropdown {
              background-color: #2E3440;
              color: #E5E9F0;
            
          }
          
          .sort-dropdown option {
              background-color: #2E3440;
              color: #E5E9F0;
          }
      }
  
      .inventory-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px 8px;
          border-bottom: 1px solid #4C566A;
        
          transition: background-color 0.2s ease;
          font-size: 8px;
          gap: 10px;
          contain: layout style paint;
          /* Prevent cursor flickering */
          position: relative;
          z-index: 1;
      }
  
      .inventory-item:hover {
          background-color: #434C5E;
        
      }
  
      .inventory-item:last-child {
          border-bottom: none;
      }
  
      .item-info {
          flex: 1;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-right: 15px;
          flex-wrap: nowrap;
          gap: 4px;
          min-width: 0;
      }
  
      .item-name {
          flex: 1 1 auto;
          min-width: 0;
          font-weight: 300;
          color: #F8F8F2;
          font-size: 14px;
          font-family: 'JetBrains Mono Light', 'JetBrains Mono', monospace;
          margin-right: 8px;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }
  
      .project-tags {
          flex: 0 1 auto;
          min-width: 0;
          max-width: 60%;
          display: flex;
          flex-wrap: nowrap;
          gap: 4px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          align-items: center;
      }
  
      .item-quantity {
          display: flex;
          width: 100px;
          min-width: 0;
          align-items: center;
          gap: 8px;
          background: #5E81AC;
          color: #E5E9F0;
          padding: 2px 8px;
          border-radius: 12px;
          font-size: 12px;
          font-weight: 600;
          justify-content: center;
          box-sizing: border-box;
      }
  
      .item-quantity.low {
          background: #BF616A;
          width: 100px;
          min-width: 0;
          justify-content: center;
          box-sizing: border-box;
      }
  
      .quantity-number {
          display: inline-block;
          width: 100%;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }
  
      .quantity-controls {
          display: flex;
          align-items: center;
          gap: 4px;
      }
  
      .quantity-btn {
          background: none;
          border: none;
          color: #E5E9F0;
        
          padding: 2px 6px;
          font-size: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s ease;
          /* Prevent cursor flickering */
          position: relative;
          z-index: 2;
      }
  
      .quantity-btn:hover {
          color: #ECEFF4;
          background: rgba(236, 239, 244, 0.1);
          border-radius: 4px;
        
      }
  
      .quantity-btn:active {
          transform: scale(0.95);
        
      }
  
      .item-actions {
          display: flex;
          gap: 8px;
          min-width: 96px;
          justify-content: flex-end;
      }
  
      .action-icon {
          background: none;
          border: none;
        
          padding: 4px;
          border-radius: 50%;
          width: 24px;
          height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s ease;
          /* Prevent cursor flickering */
          position: relative;
          z-index: 2;
      }
  
      .action-icon svg {
          width: 16px;
          height: 16px;
          fill: currentColor;
      }
  
      .edit-icon {
          color: #88C0D0;
        
      }
  
      .edit-icon:hover {
          background: rgba(136, 192, 208, 0.1);
        
      }
  
      .delete-icon {
          color: #BF616A;
        
      }
  
      .delete-icon:hover {
          background: rgba(191, 97, 106, 0.1);
        
      }
  
      .shop-icon {
          color: #A3BE8C;
        
      }
  
      .shop-icon:hover {
          background: rgba(163, 190, 140, 0.1);
        
      }
  
      /* Status Icons */
      .status-icon {
          width: 16px;
          height: 16px;
          display: inline-block;
          vertical-align: middle;
          margin-right: 4px;
      }
  
      .status-icon svg {
          width: 100%;
          height: 100%;
          fill: currentColor;
      }
  
      .status-success {
          color: #A3BE8C;
      }
  
      .status-warning {
          color: #EBCB8B;
      }
  
      .status-error {
          color: #BF616A;
      }
  
      
  
      @keyframes pulse {
          0% { opacity: 1; }
          50% { opacity: 0.8; }
          100% { opacity: 1; }
      }
  
      .sync-buttons {
          display: flow;
          position: relative;
          z-index: 2;
      }
  
      .sync-icon {
          width: 18px;
          height: 18px;
          margin-right: 8px;
          vertical-align: middle;
          fill: currentColor;
      }
  
      .sync-btn {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          flex: 1;
          min-width: 150px;
          padding: 12px;
          border: none;
          font-size: 14px;
          font-weight: 600;
        
          transition: all 0.2s ease;
          background: #4C566A;
          color: #E5E9F0;
          font-family: 'JetBrains Mono', monospace;
          /* Prevent cursor flickering */
          position: relative;
          z-index: 1;
      }
  
      .sync-btn:hover {
          background: #5E81AC;
          color: #ECEFF4;
        
      }
  
      .add-part-btn {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          width: 100%;
          background: #4C566A;
          color: #E5E9F0;
          border: none;
          padding: 15px;
          font-size: 14px;
          font-weight: 600;
        
          transition: all 0.2s ease;
          font-family: 'JetBrains Mono', monospace;
          /* Prevent cursor flickering */
          position: relative;
          z-index: 1;
      }
  
      .add-part-btn:hover {
          background: #5E81AC;
          color: #ECEFF4;
        
      }
  
      .export-btn {
          background: #4C566A;
          color: #E5E9F0;
        
      }
  
      .export-btn:hover {
          background: #5E81AC;
          color: #ECEFF4;
        
      }
  
      .import-btn {
          background: #4C566A;
          color: #E5E9F0;
        
      }
  
      .import-btn:hover {
          background: #5E81AC;
          color: #ECEFF4;
        
      }
  
      #importFile {
          display: none;
      }
  
      .modal {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(46, 52, 64, 0.8);
          z-index: 1000;
          padding: 20px;
          -webkit-overflow-scrolling: touch; /* Enable smooth scrolling on iOS */
          opacity: 0;
          transition: opacity 0.3s ease;
          /* Remove cursor: default to prevent flickering with buttons */
      }
      
      .modal.show {
          opacity: 1;
      }
  
      .modal-content {
          position: relative;
          background: #3B4252;
          padding: 20px;
          border-radius: 0;
          width: 100%;
          max-width: 500px;
          margin: 20px auto;
          box-shadow: 0 4px 16px 0 #2E3440cc;
          border: 2px solid #4C566A;
          touch-action: pan-y; /* Allow vertical scrolling within modal content */
          -webkit-overflow-scrolling: touch;
          overflow-y: auto;
          transform: translateY(-30px);
          transition: transform 0.3s ease;
      }
      
      .modal.show .modal-content {
          transform: translateY(0);
      }
      
      /* Respect user motion preferences */
      @media (prefers-reduced-motion: reduce) {
          .modal, .modal-content {
              transition: none !important;
          }
          
          .modal-content {
              transform: none !important;
          }
      }
  
      .modal-content-wide {
          max-width: 600px;
      }
  
      .modal h2 {
          margin-bottom: 15px;
          color: #88C0D0;
          font-size: 20px;
          letter-spacing: 1px;
      }
  
      .modal input {
          width: 100%;
          padding: 10px;
          border: 2px solid #4C566A;
          border-radius: 0;
          margin-bottom: 12px;
          font-size: 14px;
          background: #2E3440;
          color: #D8DEE9;
          cursor: text;
      }
  
      .modal input::placeholder {
          color: #4C566A;
      }
  
      .modal input:focus {
          outline: none;
          border-color: #81A1C1;
          cursor: text;
      }
  
      .modal p {
          color: #D8DEE9;
          margin-bottom: 15px;
          font-size: 14px;
      }
  
      .modal-buttons {
          display: flex;
          gap: 8px;
          margin-top: 15px;
      }
  
      .modal-buttons button {
          padding: 8px 12px;
          font-size: 13px;
        
          /* Prevent cursor flickering */
          position: relative;
          z-index: 1;
      }
  

  
      .notification {
          position: fixed;
          top: 20px;
          right: 20px;
          background: #A3BE8C;
          color: #E5E9F0;
          padding: 15px 25px;
          transform: translateX(120vw);
          transition: transform var(--notification-duration) var(--notification-easing);
          z-index: 1001;
          max-width: 90vw;
          word-break: break-word;
          border-radius: 4px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          font-family: 'JetBrains Mono', monospace;
          font-size: 14px;
          font-weight: 500;
          backface-visibility: hidden;
      }
  
      .notification.show {
          transform: translateX(0);
      }
  
      .notification.error {
          background: #BF616A;
      }
  
      @media (max-width: 1024px) {
          html, body {
              max-width: 100vw;
              overflow-x: hidden;
              padding: 0px;
          }
          
          .main-content,
          .inventory-list {
              max-width: 100vw;
              overflow-x: hidden;
          }
          .item-info,
          .item-name {
              min-width: 0;
              max-width: 100%;
              box-sizing: border-box;
          }
          .container {
              max-width: 100%;
              border-radius: 0;
          }
  
          .main-content {
              flex-direction: column;
              gap: 0px;
          }
  
          .left-panel, .right-panel {
              width: 100%;
          }
  
          .inventory-list {
              max-height: 465px;
          }
  
          .header {
              flex-direction: column;
              align-items: center;
              padding: 30px 15px 0px;
              gap: 8px;
              text-align: center;
          }
  
          .header-content {
              align-items: center;
          }
  
          .header h1 {
              font-size: 35px;
              text-transform: uppercase;
              letter-spacing: 0.5px;
              margin-bottom: 4px;
              text-align: center;
          }
  
          .header p {
              font-size: 10px;
              opacity: 0.8;
              margin-bottom: 8px;
              text-align: center;
          }
  
          .logo canvas {
              width: 120px;
              height: 120px;
              margin-left: auto;
              margin-right: auto;
          }
  
          .part-name {
              font-size: 20px;
          }
  
          
  
          .sync-buttons {
              flex-direction: column;
          }
  
          .sync-icon {
              width: 16px;
              height: 16px;
              margin-right: 6px;
          }
          
          .sync-btn, .add-part-btn {
              padding: 10px;
              font-size: 13px;
          }
  
          .inventory-controls {
              flex-direction: column;
              width: 100%;
          }
  
          .inventory-controls select,
          .inventory-controls button {
              width: 100%;
          }
          .manage-projects-btn {
              width: 100%;
          }
          .item-info {
              flex-direction: column;
              align-items: flex-start;

          }
  
          .item-name {
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              gap: 0;
          }
          .item-name .part-name-text {
              display: block;
              font-size: 14px;
              font-weight: 500;
              color: #F8F8F2;
              margin-bottom: 2px;
          }
          .type-pill {
              display: block;
              margin: 2px 0 0 0;
              max-width: 100%;
              font-size: 10px;
              white-space: normal;
              overflow-wrap: break-word;
              text-overflow: initial;
          }
  
          .item-quantity,
          .item-quantity.low {
              width: 110px;
              min-width: 0;
              justify-content: center;
              box-sizing: border-box;
          }
  
          .quantity-number {
              width: 100%;
              text-align: center;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
          }
  
          .quantity-controls {
              gap: 8px;
          }
  
          .quantity-btn {
              padding: 4px 8px;
          }
  
          .project-tag {
              font-size: 10px;
              padding: 1px 4px;
              max-width: 100px;
          }
  
          .inventory-item {
              padding: 12px 8px;
          }
  
          .coffee-link {
              margin-top: 12px;
          }
  
          .modal {
              padding: 10px 10px env(safe-area-inset-bottom, 80px) 10px; /* Account for mobile browser UI */
          }
  
          .modal-content {
              padding: 15px;
              margin: 20px auto 20px auto;
              overflow-y: auto;
          }
  
          .modal-content-wide {
              max-width: 100%;
          }
  
          .modal h2 {
              font-size: 18px;
              margin-bottom: 12px;
          }
  
          .modal input {
              padding: 8px;
              font-size: 13px;
              margin-bottom: 10px;
          }
  
          .modal-buttons {
              flex-direction: column;
              gap: 6px;
          }
  
          .modal-buttons button {
              width: 100%;
              padding: 10px;
          }
  
          #projectDetailsModal .modal-content,
          #allProjectRequirementsModal .modal-content {
              max-width: 100%;
          }
  
          .bom-results {
              max-height: 200px;
          }
  
          #projectParts .project-list-item {
              flex-direction: column;
              gap: 8px;
          }
  
          #projectParts .project-actions {
              width: 100%;
              justify-content: flex-end;
          }
  
          .item-name {
              white-space: normal;
              overflow: visible;
              text-overflow: initial;
              word-break: break-word;
          }
      }
  
      /* Project Management Modal */
      #projectList {
          background: #2E3440;
          padding: 15px;
          border: 1px solid #4C566A;
          max-height: 400px;
          overflow-y: auto;
      }
  
      #projectList .project-list-item {
          padding: 15px;
          border-bottom: 1px solid #4C566A;
          display: flex;
          justify-content: space-between;
          align-items: center;
      }
  
      #projectList .project-list-item:last-child {
          border-bottom: none;
      }
  
      #projectList strong {
          color: #ECEFF4;
          font-size: 16px;
          display: block;
          margin-bottom: 5px;
      }
  
      #projectList .project-info {
          color: #D8DEE9;
          font-size: 14px;
      }
  
      .project-delete-btn {
          background: #BF616A;
          color: #E5E9F0;
          border: none;
          padding: 8px 16px;
          font-size: 13px;
        
          transition: all 0.2s ease;
          font-family: 'JetBrains Mono', monospace;
      }
  
      .project-delete-btn:hover {
          background: #D08770;
      }
  
      /* Project Details Modal */
      #projectDetailsModal .modal-content {
          max-width: 600px;
      }
  
      
  
      #projectParts {
          background: #2E3440;
          padding: 15px;
          border: 1px solid #4C566A;
          max-height: 400px;
          overflow-y: auto;
          border-radius: 0;
      }
  
      #projectParts .project-list-item {
          padding: 12px;
          border-bottom: 1px solid #4C566A;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-radius: 0;
      }
  
      #projectParts .project-list-item:last-child {
          border-bottom: none;
      }
  
      #projectParts .project-info {
          color: #D8DEE9;
          font-size: 14px;
          margin-top: 5px;
      }
  
      #projectParts .project-actions {
          display: flex;
          align-items: center;
          gap: 10px;
      }
  
      #projectParts .project-remove-btn {
          background: #BF616A;
          color: #E5E9F0;
          border: none;
          padding: 6px 12px;
          font-size: 12px;
        
          transition: all 0.2s ease;
          font-family: 'JetBrains Mono', monospace;
          border-radius: 0;
      }
  
      #projectParts .project-remove-btn:hover {
          background: #D08770;
      }
  
      /* Modal Buttons */
      .modal-buttons-top {
          position: sticky;
          bottom: 0;
          background: #3B4252;
          padding: 15px;
          margin: 0 -20px -20px;
          border-top: 1px solid #4C566A;
      }
  
      .add-missing-btn {
          background: #A3BE8C;
          color: #2E3440;
          font-weight: 600;
      }
  
      .add-missing-btn:hover {
          background: #8FBCBB;
      }
  
      /* Additional utility classes */
      .hidden {
          display: none !important;
      }
  
      .full-width {
          width: 100%;
      }
  
      .flex-1 {
          flex: 1;
      }
  
      /* Project Tags Styles */
      .project-tags {
          display: flex;
          flex-wrap: nowrap;
          min-width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          align-items: center;
          max-width: 60%;
      }
  
      .project-tag {
          display: inline-block;
          background-color: var(--nord3) !important;
          color: var(--nord6) !important;
          padding: 4px 8px !important;
          border-radius: 12px !important;
          margin: 2px !important;
          font-size: 1em !important;
          font-weight: 500 !important;
          max-width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
    
          border: 1px solid var(--nord4) !important;
          box-shadow: 0 1px 2px rgba(0,0,0,0.03);
          transition: all 0.2s ease;
          user-select: none;
          /* Prevent cursor flickering */
          position: relative;
          z-index: 1;
      }
  
      .project-tag:hover {
          background-color: var(--nord10) !important;
          color: var(--nord6) !important;
          transform: translateY(-1px);
          box-shadow: 0 2px 4px rgba(0,0,0,0.15);
          border-color: var(--nord10) !important;
      }
  
      .project-tag.more-tags {
          background-color: var(--nord2) !important;
          font-style: italic;
      }
      
      .project-tag.more-tags:hover {
          background-color: var(--nord9) !important;
          color: var(--nord6) !important;
          transform: translateY(-1px);
          box-shadow: 0 2px 4px rgba(0,0,0,0.15);
          border-color: var(--nord9) !important;
      }
  
      /* All Project Tags Modal Styles */
      .all-project-tags-list {
          max-height: 300px;
          overflow-y: auto;
          padding: 10px;
          margin: 10px 0;
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
      }
  
      .all-project-tags-list .project-tag {
          max-width: none;
          margin: 0;
          background-color: var(--nord3) !important;
          color: var(--nord6) !important;
      }

      .all-project-tags-list .no-projects {
          color: var(--nord4);
          font-style: italic;
          text-align: center;
          margin: 0;
          padding: 20px;
          background: var(--nord1);
          border: 1px dashed var(--nord3);
          border-radius: 4px;
      }
  
        #allProjectTagsModal .modal-content {
      max-width: 500px;
      width: 90%;
      margin: 20px auto;
  }
  #projectStatus .project-header .stat-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #D8DEE9;
    font-weight: 500;
}
.stat-item {
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 15px;
}
      @media (max-width: 1280px) {
          .inventory-list .project-tag:nth-child(n+2):not(.more-tags) {
              display: none;
          }
          .inventory-list .project-tag.more-tags {
              display: inline-block !important;
          }
      }
  
      #projectStatus {
          background: #2E3440;
          margin-bottom: 20px;
          color: #E5E9F0;
      }
      
      #projectStatus p {
          color: #E5E9F0;
          margin: 5px 0;
          font-size: 14px;
      }
      
      #projectStatus .project-header {
        justify-content: space-between;
          margin-bottom: 15px;
          /* Remove old color/font-size, use stat-item styles for children */
      }
      #projectStatus .project-header .stat-item.low {
          background: rgba(235, 203, 139, 0.15);
          border: 1px solid #EBCB8B;
      }
      #projectStatus .project-header .stat-item.sufficient {
          background: rgba(163, 190, 140, 0.15);
          border: 1px solid #A3BE8C;
      }
      #projectStatus .project-header .stat-number {
          font-size: 15px;
          font-weight: 700;
          margin-bottom: 4px;
      }
      #projectStatus .project-header .stat-item.missing .stat-number {
          color: #BF616A;
      }
      #projectStatus .project-header .stat-item.low .stat-number {
          color: #EBCB8B;
      }
      #projectStatus .project-header .stat-item.sufficient .stat-number {
          color: #A3BE8C;
      }
      #projectStatus .project-header .stat-label {
          font-size: 12px;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          color: #D8DEE9;
          font-weight: 500;
      }
  
      .project-parts {
          max-height: 400px;
          overflow-y: auto;
      }
  
      .project-list {
          max-height: 300px;
          overflow-y: auto;
          margin-bottom: 20px;
      }
  
      /* BOM Results Styling */
      .bom-results {
          max-height: 400px;
          overflow-y: auto;
          background: #2E3440;
          padding: 15px;
          margin-bottom: 20px;
          border: 1px solid #4C566A;
          color: #D8DEE9;
      }
  
      .bom-results .project-header {
          margin-bottom: 15px;
          padding-bottom: 10px;
          border-bottom: 1px solid #4C566A;
          color: #88C0D0;
          font-size: 16px;
          display: flex;
          gap: 20px;
      }
  
      .bom-results .project-info {
          list-style: none;
          padding: 0;
          margin: 0;
          flex: 1;
      }
  
      .bom-results .project-info li {
          padding: 12px;
          border-bottom: 1px solid #4C566A;
          display: flex;
          align-items: flex-start;
          gap: 0;
          color: #D8DEE9;
          font-size: 13px;
          line-height: 1.4;
      }
  
      .bom-part-label {
          display: flex;
          align-items: flex-start;
          min-width: 0;
          flex: 1 1 60%;
          gap: 8px;
          word-break: break-word;
      }
  
      .bom-part-status {
          flex: 1 1 40%;
          text-align: left;
          padding-left: 12px;
          min-width: 120px;
          word-break: break-word;
      }
  
      .bom-results .project-info li strong {
          color: #ECEFF4;
          font-weight: 600;
          font-size: 14px;
          margin-right: 4px;
          display: inline-block;
      }
  
      .bom-results .status-icon {
          width: 18px;
          height: 18px;
          flex-shrink: 0;
          display: flex;
          align-items: flex-start;
          margin-top: 2px;
      }
  
      .bom-results .status-icon svg {
          width: 100%;
          height: 100%;
      }
  
      .bom-results .project-info li > div {
          flex: 1;
          min-width: 0;
      }
  
      .bom-results .status-success {
          color: #A3BE8C;
      }
  
      .bom-results .status-warning {
          color: #EBCB8B;
      }
  
      .bom-results .status-error {
          color: #BF616A;
      }
  
      @media (max-width: 1024px) {
          .bom-results .project-info li {
              font-size: 12px;
              padding: 14px 8px;
              flex-direction: column;
              gap: 4px;
          }
          .bom-part-label, .bom-part-status {
              flex: unset;
              min-width: 0;
              padding-left: 0;
              text-align: left;
          }
          .bom-part-status {
              margin-top: 2px;
          }
          .bom-results .status-icon {
              width: 16px;
              height: 16px;
              margin-top: 1px;
          }
      }
  
      /* Export/Import Modals */
      .export-format-text {
          margin-bottom: 15px;
          font-size: 14px;
      }
  
      /* All Projects Modal */
      #allProjectRequirementsModal .modal-content {
          max-width: 500px;
      }
  
      #allProjectRequirementsModal h2 {
          font-size: 20px;
          margin-bottom: 15px;
      }
  
      #allProjectRequirementsTable {
          font-size: 13px;
      }
  
      #allProjectRequirementsTable th, 
      #allProjectRequirementsTable td {
          padding: 6px 8px;
      }
  
      /* Project Name Modal */
      #projectNameModal {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(46, 52, 64, 0.8);
          z-index: 1000;
      }
  
      #projectNameModal.show {
          display: flex;
          align-items: center;
          justify-content: center;
      }
  
      #projectNameModal .modal-content {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background-color: #2E3440;
          padding: 20px;
          border: 1px solid #4C566A;
          border-radius: 8px;
          width: 90%;
          max-width: 500px;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          margin: 0;
      }
  
      .modal-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
          padding-bottom: 10px;
          border-bottom: 1px solid #4C566A;
      }
  
      .modal-header h2 {
          color: #ECEFF4;
          margin: 0;
          font-size: 1.5rem;
      }
  
      .modal-body {
          margin-bottom: 20px;
      }
  
      .modal-body input {
          width: 100%;
          padding: 10px;
          border: 1px solid #4C566A;
          border-radius: 4px;
          background-color: #3B4252;
          color: #ECEFF4;
          font-size: 1rem;
      }
  
      .modal-body input:focus {
          outline: none;
          border-color: #81A1C1;
          box-shadow: 0 0 0 2px rgba(129, 161, 193, 0.2);
      }
  
      .modal-footer {
          display: flex;
          justify-content: flex-end;
          gap: 10px;
      }
  
      .modal-footer button {
          padding: 8px 16px;
          border: none;
          border-radius: 4px;
          font-size: 0.9rem;
        
          transition: all 0.2s ease;
      }
  
      .modal-footer button:first-child {
          background-color: #4C566A;
          color: #ECEFF4;
      }
  
      .modal-footer button:last-child {
          background-color: #81A1C1;
          color: #2E3440;
      }
  
      .modal-footer button:hover {
          filter: brightness(1.1);
      }
  
      @media (max-width: 1024px) {
          .modal-content {
              width: 95%;
          }
          
          .modal-header h2 {
              font-size: 1.2rem;
          }
          
          .modal-body input {
              font-size: 0.9rem;
          }
          
          .modal-footer button {
              padding: 6px 12px;
              font-size: 0.8rem;
          }
      }
  
      .footer {
          background: #2E3440;
          padding: 15px;
          text-align: right;
          border-top: 2px solid #4C566A;
          margin-top: auto;
      }
  
      .footer-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.about-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--nord8);
    text-decoration: none;
    font-size: 14px;
    padding: 8px 16px;
    border: 1px solid var(--nord8);
    background: rgba(136, 192, 208, 0.1);
    transition: all 0.2s ease;
    font-family: 'JetBrains Mono', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Prevent cursor flickering */
    position: relative;
    z-index: 1;
    cursor: inherit;
    /* Remove default button styling */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
}

.about-link:hover {
    background: var(--nord8);
    color: var(--nord1);
    transform: translateY(-1px);
    text-decoration: none;
}

.about-link:focus {
    outline: 2px solid var(--nord8);
    outline-offset: 2px;
}

.about-link:active {
    transform: translateY(0);
}





.version {
    color: #4C566A;
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
}
  
      .coffee-link {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          color: #EBCB8B;
          text-decoration: none;
          font-size: 14px;
          padding: 8px 16px;
          background: rgba(235, 203, 139, 0.1);
          transition: all 0.2s ease;
          cursor: inherit;
      }
  
      .coffee-link:hover {
          background: rgba(235, 203, 139, 0.2);
          color: #EBCB8B;
          transform: translateY(-1px);
      }
  
      .coffee-icon {
          width: 18px;
          height: 18px;
          fill: currentColor;
      }
  
      @media (max-width: 1024px) {
          .footer {
              padding: 12px;
              text-align: center;
          }
  
          .footer-content {
              flex-direction: column;
              gap: 8px;
              justify-content: center;
              padding: 0 10px;
          }
  
          .coffee-link {
              font-size: 13px;
              padding: 6px 12px;
          }
  
          .version {
              font-size: 12px;
          }
      }
  
      /* All scrollbar styling is now handled by the universal selector at the top */
  
            /* All Projects Modal Styling */
      #allProjectRequirementsModal .modal-content {
          background: #2E3440;
          border: 2px solid #4C566A;
          color: #E5E9F0;
          box-shadow: 0 8px 32px 0 #2E3440cc;
          border-radius: 0;
          max-width: 900px;
          max-height: 85vh;
          display: flex;
          flex-direction: column;
          padding: 15px;
      }

      #allProjectRequirementsModal h2 {
          color: #88C0D0;
          font-size: 22px;
          margin-bottom: 18px;
      }

      #allProjectRequirements {
          overflow-y: auto;
          flex: 1;
          padding-right: 10px;
      }

      /* Requirements Summary Section */
      .requirements-summary {
          position: sticky;
          top: 0;
          z-index: 10;
          margin-bottom: 25px;
          padding: 15px;
          background: #3B4252;
          border: 1px solid #4C566A;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
      }

      .summary-stats {
          display: flex;
          gap: 20px;
          justify-content: center;
      }

      .stat-item {
          display: flex;
          align-items: center;
          padding: 12px 20px;
          min-width: 250px;
      }

      .stat-item.missing {
          background: rgba(191, 97, 106, 0.15);
          border: 1px solid #BF616A;
      }

      .stat-item.low {
          background: rgba(235, 203, 139, 0.15);
          border: 1px solid #EBCB8B;
      }

      .stat-item.sufficient {
          background: rgba(163, 190, 140, 0.15);
          border: 1px solid #A3BE8C;
      }

      .stat-number {
          font-size: 24px;
          font-weight: 700;
          line-height: 1;
          margin-bottom: 4px;
      }

      .stat-item.missing .stat-number {
          color: #BF616A;
      }

      .stat-item.low .stat-number {
          color: #EBCB8B;
      }

      .stat-item.sufficient .stat-number {
          color: #A3BE8C;
      }

      .stat-label {
          font-size: 12px;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          color: #D8DEE9;
          font-weight: 500;
      }

      /* Requirements Sections */
      .requirements-section {
          margin-bottom: 25px;
      }

      .requirements-section.missing {
          border-left: 4px solid #BF616A;
      }

      .requirements-section.low {
          border-left: 4px solid #EBCB8B;
      }

      .requirements-section.sufficient {
          border-left: 4px solid #A3BE8C;
      }

      .section-title {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 15px;
          padding-left: 12px;
          color: #88C0D0;
      }

      .section-icon {
          width: 18px;
          height: 18px;
          flex-shrink: 0;
      }

      .requirements-section.missing .section-icon {
          fill: #BF616A;
      }

      .requirements-section.low .section-icon {
          fill: #EBCB8B;
      }

      .requirements-section.sufficient .section-icon {
          fill: #A3BE8C;
      }

      .section-title-text {
          flex: 1;
      }

      .parts-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
          gap: 15px;
          padding-left: 12px;
      }

      /* Part Cards */
      .part-card {
          background: #3B4252;
          border: 1px solid #4C566A;
          padding: 15px;
      }

      .part-card.missing {
          border-left: 3px solid #BF616A;
      }

      .part-card.low {
          border-left: 3px solid #EBCB8B;
      }

      .part-card.sufficient {
          border-left: 3px solid #A3BE8C;
      }

      .part-header {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 12px;
      }

      .part-header .status-icon {
          width: 16px;
          height: 16px;
          flex-shrink: 0;
      }

      .part-header .status-icon svg {
          width: 100%;
          height: 100%;
          fill: currentColor;
      }

      .status-missing {
          color: #BF616A !important;
      }

      .status-low {
          color: #EBCB8B !important;
      }

      .status-sufficient {
          color: #A3BE8C !important;
      }

      .part-card.missing .status-icon,
      .part-card .status-missing {
          color: #BF616A;
      }

      .part-card.low .status-icon,
      .part-card .status-low {
          color: #EBCB8B;
      }

      .part-card.sufficient .status-icon,
      .part-card .status-sufficient {
          color: #A3BE8C;
      }

      .part-name {
          font-weight: 600;
          color: #ECEFF4;
          font-size: 14px;
      }

      .part-quantities {
          margin-bottom: 12px;
      }

      .quantity-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 4px;
          font-size: 13px;
      }

      .qty-label {
          color: #D8DEE9;
          font-weight: 500;
      }

      .qty-value {
          font-weight: 600;
          color: #E5E9F0;
      }

      .qty-missing,
      .qty-value.missing,
      .qty-value.low {
          color: #BF616A;
          font-weight: 700;
      }

      .qty-low {
          color: #EBCB8B;
          font-weight: 700;
      }

      .qty-sufficient {
          color: #A3BE8C;
          font-weight: 600;
      }

      /* More specific selectors for quantity values in requirements modal */
      .part-card .qty-missing,
      .part-card .qty-value.qty-missing,
      .part-card.missing .qty-value {
          color: #BF616A !important;
          font-weight: 700;
      }

      .part-card .qty-low,
      .part-card .qty-value.qty-low,
      .part-card.low .qty-value {
          color: #EBCB8B !important;
          font-weight: 700;
      }

      .part-card .qty-sufficient,
      .part-card .qty-value.qty-sufficient,
      .part-card.sufficient .qty-value {
          color: #A3BE8C !important;
          font-weight: 600;
      }

      .qty-value.shortage {
          color: #BF616A;
          font-weight: 700;
          background: rgba(191, 97, 106, 0.15);
          padding: 2px 6px;
          border-radius: 4px;
      }

      .quantity-row.shortage {
          border-top: 1px solid #4C566A;
          padding-top: 6px;
          margin-top: 6px;
      }

      .project-breakdown {
          border-top: 1px solid #4C566A;
          padding-top: 10px;
      }

      .breakdown-label {
          font-size: 12px;
          color: #88C0D0;
          font-weight: 500;
          margin-bottom: 6px;
          display: block;
      }

      .project-list {
          flex-wrap: wrap;
          gap: 4px;
      }

      .project-usage {
          display: inline-block;
          background: #4C566A;
          color: #D8DEE9;
          font-size: 11px;
          padding: 2px 6px;
          border-radius: 10px;
          border: 1px solid #434C5E;
      }



      /* Mobile Responsive */
      @media (max-width: 1024px) {
          .summary-stats {
              flex-direction: column;
              gap: 12px;
          }

          .stat-item {
              flex-direction: row;
              justify-content: space-between;
              padding: 10px 15px;
          }

          .stat-number {
              font-size: 20px;
          }

          .parts-grid {
              grid-template-columns: 1fr;
              gap: 12px;
              padding-left: 8px;
          }

          .part-card {
              padding: 12px;
          }

          .section-title {
              font-size: 14px;
              padding-left: 8px;
          }

          #allProjectRequirementsModal .modal-content {
              max-width: 100%;
          }
      }
  
      /* Project Details Modal */
            .project-parts-list {
          list-style: none;
          padding: 0;
          margin: 0;
      }
      
      .project-parts-list li {
          padding: 12px;
          border-bottom: 1px solid #4C566A;
          color: #E5E9F0;
          font-size: 14px;
          line-height: 1.4;
      }
      
      .project-parts-list li:last-child {
          border-bottom: none;
      }
      
      .project-parts-list strong {
          color: #ECEFF4;
          font-weight: 600;
      }

      #projectParts strong {
          color: #ECEFF4;
          font-weight: 600;
          font-size: 15px;
      }

      #projectParts .project-info {
          color: #D8DEE9;
          font-size: 14px;
          margin-top: 5px;
      }

      /* Project Details Modal - Specific requirements-summary styling */
      #projectStatus .requirements-summary {
          position: static;
          margin-bottom: 0px;
          padding: 10px;
          box-shadow: none;
      }
  
      @media (max-width: 1024px) {
          #projectParts .project-list-item {
              flex-direction: column;
              align-items: flex-start;
              gap: 12px;
              padding: 15px;
              border-radius: 0;
          }
  
          #projectParts .project-actions {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
          }
  
          #projectParts strong {
              display: block;
              margin-bottom: 4px;
              font-size: 15px;
          }
  
          #projectParts .project-info {
              font-size: 13px;
              margin-top: 4px;
          }
  
          #projectParts .project-remove-btn {
              padding: 6px 12px;
              font-size: 12px;
              border-radius: 0;
          }
  
          #projectStatus .project-header {
              flex-direction: column;
              font-size: 14px;
          }
      }
  
      .wordmark-svg {
          width: 100%;
          max-width: 350px;
          height: auto;
          display: block;
          margin-bottom: 4px;
      }
      @media (max-width: 1024px) {
          .wordmark-svg {
              max-width: 150px;
          }
      }
  
      
  
      /* Nord styling for inventory-style project list in Edit Part modal */
      .nord-project-inv-list {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin-top: 8px;
        max-height: 220px;
        overflow-y: auto;
        background: #2E3440;
        padding: 10px;
      }
      .nord-project-inv-row {
        display: flex;
        align-items: center;
        padding: 4px 0;
        font-family: 'JetBrains Mono', monospace;
        border-bottom: 1px solid #4C566A;
      }
      .nord-project-inv-row:last-child {
        border-bottom: none;
      }
      .nord-project-inv-name {
        color: #EBCB8B;
        font-size: 14px;
        margin-right: 12px;
        min-width: 120px;
        flex: 1;
        font-family: 'JetBrains Mono', monospace;
      }
      .modal-item-quantity {
        display: flex;
        align-items: center;
        gap: 6px;
        background: none;
        border-radius: 0;
        padding: 0;
        margin-left: auto;
      }
      .modal-item-quantity .quantity-btn {
        background: none;
        color: #E5E9F0;
        border: none;
        font-size: 18px;
        width: 28px;
        height: 28px;
        border-radius: 4px;
        transition: background 0.2s, color 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .modal-item-quantity .quantity-btn:hover {
        background: #5E81AC;
        color: #ECEFF4;
      }
  
      /* Cycle project tag colors using Nord palette */
      .project-tag:nth-child(7n+1) { background-color: var(--nord7) !important; color: var(--nord1) !important; }
      .project-tag:nth-child(7n+2) { background-color: var(--nord8) !important; color: var(--nord1) !important; }
      .project-tag:nth-child(7n+3) { background-color: var(--nord9) !important; color: var(--nord1) !important; }
      .project-tag:nth-child(7n+4) { background-color: var(--nord10) !important; color: var(--nord6) !important; }
      .project-tag:nth-child(7n+5) { background-color: var(--nord13) !important; color: var(--nord1) !important; }
      .project-tag:nth-child(7n+6) { background-color: var(--nord14) !important; color: var(--nord1) !important; }
      .project-tag:nth-child(7n+7) { background-color: var(--nord15) !important; color: var(--nord6) !important; }
  
      .data-note {
          color: #EBCB8B;
          font-size: 12px;
          margin-left: 16px;
          opacity: 0.85;
      }
      @media (max-width: 1024px) {
          .data-note {
              display: block;
              margin-left: 0;
              margin-top: 6px;
              text-align: center;
          }
      }
  
      @media (max-width: 1280px) {
          .project-tag {
              max-width: 80px;
              font-size: 0.85em;
              padding: 2px 6px;
          }
      }
  
      .part-type-dropdown {
          width: 100%;
          padding: 8px;
          margin-bottom: 8px;
          font-size: 14px;
          background: #2E3440;
          color: #E5E9F0;
          border: 1.5px solid #4C566A;
          border-radius: 0;
          font-family: 'JetBrains Mono', monospace;
      }
      .type-suggestion {
          font-size: 12px;
          color: #A3BE8C;
          margin-bottom: 8px;
          min-height: 16px;
      }
  
      .type-pill {
          display: inline-block;
          background: #4C566A;
          color: #EBCB8B;
          font-size: 11px;
          font-weight: 600;
          border-radius: 8px;
          padding: 2px 8px;
          margin-left: 6px;
          vertical-align: middle;
          line-height: 1.2;
          border: 1px solid #3B4252;
      }
      .type-pill.mlcc { background: #88C0D0; color: #2E3440; }
      .type-pill.boxfilm { background: #A3BE8C; color: #2E3440; }
      .type-pill.electrolytic { background: #D08770; color: #2E3440; }
      .type-pill.tantalum { background: #d1b581; color: #2E3440; }
      .type-pill.other { background: #B48EAD; color: #2E3440; }
  
      .set-type-pill {
          display: inline-block;
          background: #434C5E;
          color: #EBCB8B;
          font-size: 11px;
          font-weight: 600;
          border-radius: 8px;
          padding: 2px 8px;
          margin-left: 6px;
          vertical-align: middle;
          line-height: 1.2;
          border: 1px dashed #EBCB8B;
          opacity: 0.8;
          transition: background 0.2s, color 0.2s, opacity 0.2s;
      }
      .set-type-pill:hover {
          background: #EBCB8B;
          color: #2E3440;
          opacity: 1;
      }
  
      @media (max-width: 1024px) {
          .type-pill {
              max-width: 60px;
              min-width: 0;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              display: inline-block;
              vertical-align: middle;
              font-size: 10px;
              line-height: 1.1;
              padding: 2px 4px;
              margin-left: 4px;
          }
          .type-pill.electrolytic {
              font-size: 9px;
              letter-spacing: -0.2px;
          }
          .type-pill[title]:hover::after {
              content: attr(title);
              position: absolute;
              left: 0;
              top: 100%;
              background: #2E3440;
              color: #E5E9F0;
              padding: 6px 10px;
              border-radius: 4px;
              z-index: 1000;
              white-space: normal;
              max-width: 200px;
              box-shadow: 0 2px 8px rgba(0,0,0,0.2);
              font-size: 12px;
              display: block;
          }
      }
  
      @media (max-width: 1024px) {
        .project-tags {
          display: flex;
          width: 100%;
          max-width: 100%;
          margin-bottom: 8px;
          justify-content: flex-start;
          flex-wrap: wrap;
          gap: 2px;
          overflow: visible;
          text-overflow: initial;
          white-space: normal;
        }
      }
  
      @media (max-width: 1024px) {
        .inventory-list .inventory-item {
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          justify-content: space-between;
          gap: 0 12px;
        }
        .inventory-list .item-left {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          flex: 1 1 0;
          min-width: 0;
        }
        .inventory-list .item-controls {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 8px;
          min-width: 120px;
        }
        .inventory-list .item-quantity,
        .inventory-list .item-actions {
          width: 110px;
          justify-content: flex-end;
        }
        .inventory-list .item-name {
          margin-bottom: 4px;
        }
        .inventory-list .project-tags {
          width: 100%;
          max-width: 100%;
          margin-bottom: 8px;
          justify-content: flex-start;
          flex-wrap: wrap;
          gap: 2px;
          overflow: visible;
          text-overflow: initial;
          white-space: normal;
        }
      }

/* About Modal Styling */
.about-content {
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 10px;
    cursor: default;
}

.about-content * {
    cursor: default;
}

.about-content h3 {
    color: var(--nord8);
    font-size: 16px;
    margin-bottom: 12px;
    font-weight: 600;
}

.about-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.about-content li {
    background: var(--nord1);
    border-left: 3px solid var(--nord10);
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 0 4px 4px 0;
    color: var(--nord5);
    font-size: 13px;
    line-height: 1.4;
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-item {
    background: var(--nord1);
    border-left: 3px solid var(--nord10);
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 0 4px 4px 0;
    color: var(--nord5);
    font-size: 13px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 10px;
}

.feature-icon {
    width: 20px;
    height: 20px;
    fill: var(--nord8);
    flex-shrink: 0;
}

.heart-icon {
    width: 16px;
    height: 16px;
    fill: var(--nord11);
    vertical-align: middle;
    margin: 0 4px;
}

.contact-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--nord6);
    text-decoration: none;
    padding: 10px 15px;
    background: var(--nord1);
    border: 1px solid var(--nord2);
    transition: all 0.2s;
    cursor: inherit;
}

.contact-link:hover {
    background: var(--nord2);
    border-color: var(--nord8);
    transform: translateY(-1px);
}

.contact-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.github-link {
    background: rgba(136, 192, 208, 0.1);
}

.github-link:hover {
    background: var(--nord9);
}

.email-link {
    background: rgba(163, 190, 140, 0.1);
}

.email-link:hover {
    background: var(--nord14);
}

.coffee-link {
    background: rgba(208, 135, 112, 0.1);
}

.coffee-link:hover {
    background: var(--nord11);
}

.version-info {
    margin-top: 20px;
    color: var(--nord3);
    font-size: 12px;
    text-align: center;
}

@media (max-width: 1024px) {
    .contact-links {
        flex-direction: column;
        gap: 10px;
    }
    
    .contact-link {
        width: 100%;
        justify-content: center;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .footer-links {
        justify-content: center;
    }
}

@media (max-width: 1024px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .footer-links {
        order: -1;
    }
}

/* =============================================================================
   BOM ASSISTANT STYLES
   ============================================================================= */

.bom-assistant-content {
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 10px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    position: relative;
}

.assistant-intro {
    background: var(--nord1);
    border: 1px solid var(--nord8);
    padding: 15px;
    margin-bottom: 20px;
    color: var(--nord6);
    font-size: 14px;
}

.assistant-section {

    border-bottom: 1px solid var(--nord2);
    padding-bottom: 20px;
}

.assistant-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.assistant-section h3 {
    color: var(--nord8);
    font-size: 16px;
    margin-bottom: 12px;
    font-weight: 600;
}

.assistant-section h4 {
    color: var(--nord14);
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 500;
}

.step-list, .tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.step-list li, .tips-list li {
    background: var(--nord1);
    border-left: 3px solid var(--nord10);
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 0 4px 4px 0;
    color: var(--nord5);
    font-size: 13px;
    line-height: 1.4;
}

.tips-list li {
    border-left-color: var(--nord13);
}

.prompt-template {
    background: var(--nord1);
    border: 1px solid var(--nord2);
    overflow: hidden;
}

.template-header {
    background: var(--nord2);
    border-bottom: 1px solid var(--nord3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--nord6);
    font-size: 14px;
    font-weight: 500;
    padding-bottom: 10px;
}

.copy-prompt-btn {
    background: rgba(136, 192, 208, 0.1);
    color: var(--nord6);
    border: 1px solid var(--nord9);
    padding: 10px 10px;
    font-size: 13px;
    font-weight: 500;
    font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Dank Mono', 'Source Code Pro', monospace;
    transition: all 0.15s ease;
    position: relative;
    overflow: hidden;
    /* Prevent cursor flickering */
    z-index: 2;
}

.copy-prompt-btn:hover {
    background: var(--nord9);
    border-color: var(--nord8);
}

.copy-prompt-btn:active {
    background: var(--nord8);
    border-color: var(--nord7);
}

.copy-prompt-btn:focus {
    outline: none;
}

#promptTemplate {
    background: transparent;
    color: var(--nord5);
    font-size: 12px;
    line-height: 1.4;
    padding: 15px;
    margin: 0;
    white-space: pre-wrap;
    overflow-x: auto;
    border: none;
}

.import-methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 15px;
}

.import-method {
    background: var(--nord1);
    border: 1px solid var(--nord2);
    padding: 15px;
}

.import-method p {
    color: var(--nord5);
    font-size: 13px;
    margin-bottom: 10px;
}

#bomTextInput {
    background: var(--nord0);
    border: 1px solid var(--nord2);
    color: var(--nord5);
    font-size: 12px;
    line-height: 1.4;
    padding: 10px;
    resize: vertical;
    margin-bottom: 10px;
}

#bomTextInput:focus {
    outline: none;
    border-color: var(--nord8);
    box-shadow: 0 0 0 2px rgba(136, 192, 208, 0.3);
}

#bomTextInput::placeholder {
    color: var(--nord3);
    font-style: italic;
}

.popular-ais .ai-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 15px;
}

.ai-link {
    display: block;
    background: var(--nord1);
    border: 1px solid var(--nord2);
    padding: 15px;
    text-decoration: none;
    transition: all 0.2s;
    color: inherit;
    cursor: inherit;
}

.ai-link:hover {
    background: var(--nord2);
    border-color: var(--nord8);
    transform: translateY(-1px);
}

.ai-name {
    display: block;
    color: var(--nord8);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}

.ai-desc {
    display: block;
    color: var(--nord9);
    font-size: 12px;
    line-height: 1.3;
}

/* Mobile responsiveness for BOM Assistant */
@media (max-width: 1024px) {
    .bom-assistant-content {
        max-height: 60vh;
        padding-right: 5px;
        position: relative;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }
    
    .import-methods {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .template-header {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
        text-align: center;
    }
    
    .copy-prompt-btn {
        width: 100%;
        padding: 12px 16px;
        font-size: 14px;
    }
    
    #promptTemplate {
        font-size: 11px;
        padding: 12px;
    }
    
    .popular-ais .ai-links {
        grid-template-columns: 1fr;
    }
    
    .step-list li, .tips-list li {
        font-size: 12px;
        padding: 8px 12px;
    }
}


  

  
/* =============================================================================
   PROJECT REQUIREMENTS CLICKABLE CARDS
   ============================================================================= */

.part-card.has-purchase-url {
    position: relative;
    transition: all 0.2s ease;
}

.part-card.has-purchase-url:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
    border-left: 3px solid var(--nord8);
}

.purchase-link-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 14px;
    height: 14px;
    opacity: 0.6;
    pointer-events: none;
}

.purchase-link-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.part-card.has-purchase-url:hover .purchase-link-icon {
    opacity: 1;
}

.part-card.has-purchase-url .part-header {
    position: relative;
}

@media (max-width: 1024px) {
    .part-card.has-purchase-url:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .purchase-link-icon {
        font-size: 11px;
        top: 6px;
        right: 6px;
    }
}
  

  
@media (max-width: 1024px) {
    .logo {
        display: none;
    }
    
    .header-content {
        margin-left: 0;
    }
}
  
/* Mobile Navigation */
.mobile-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--nord1);
    border-top: 1px solid var(--nord3);
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 1100;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.33, 0.00, 0.00, 1.00);
    /* Ensure it's above device UI */
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

.mobile-nav.show {
    transform: translateY(0);
}

/* Respect user motion preferences for mobile nav */
@media (prefers-reduced-motion: reduce) {
    .mobile-nav {
        transition: none !important;
    }
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    background: var(--nord1);
    border: none;
    color: var(--nord7);
    padding: 8px 0;
    font-size: 12px;
    transition: color 0.2s;
}

.mobile-nav-item.active {
    color: var(--nord13);
}

.mobile-nav-icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
    margin-bottom: 4px;
}

.mobile-menu {
    display: block;
    position: fixed;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    background: var(--nord1);
    border-top: 1px solid var(--nord3);
    padding: 16px;
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.5s cubic-bezier(0.33, 0.00, 0.00, 1.00), opacity 0.5s cubic-bezier(0.33, 0.00, 0.00, 1.00);
    z-index: 1000;
}

.mobile-menu.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px;
    margin-bottom: 8px;
    background: var(--nord1);
    border: 1px solid var(--nord3);
    color: var(--nord9);
    font-size: 16px;
  
    transition: all 0.2s;
}

.mobile-menu-item:last-child {
    margin-bottom: 0;
}

.mobile-menu-item:hover {
    background: var(--nord2);
    color: var(--nord8);
}

.mobile-menu-icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
    margin-right: 12px;
}

@media (max-width: 1024px) {
    .mobile-nav {
        display: flex;
    }

    .sync-buttons {
        display: none;
    }

    .manage-projects-btn,
    #compareAllProjectsBtn {
        display: none;
    }

    .desktop-only {
        display: none;
    }

    .footer {
        display: none;
    }


    .inventory-list {
        /* Remove max-height constraint to allow flex to work properly */
        max-height: none;
    }
}
  
@media (max-width: 1024px) {
    /* Base layout fixes */
    html, body {
        height: 100vh;
        height: 100dvh;
        overflow: hidden; /* Prevent page-level scrolling on mobile */
        position: relative;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .container {
        height: 100vh;
        height: 100dvh;
        overflow: hidden; /* Prevent container-level scrolling on mobile */
        display: flex;
        flex-direction: column;
        max-width: 100%;
        border-radius: 0;
        padding: 0;
        margin: 0;
    }

    /* Simplified mobile nav padding - works for both PWA and browser */
    .inventory-list {
        /* Mobile nav height + safe padding - use margin so scrollbar stops before nav */
        margin-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: 0 !important;
    }

    .content {
        overflow: hidden; /* Prevent content-level scrolling on mobile */
        flex: 1;
        /* Ensure content doesn't get cut off by mobile nav */
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .main-content {
        flex: 1;
        overflow: hidden; /* Prevent main-content-level scrolling on mobile */
        flex-direction: column;
        gap: 0;
        min-height: 0; /* Allow flex item to shrink */
        display: flex;
    }

    /* Header adjustments */
    .header {
        flex-direction: column;
        align-items: center;
        padding: 10px 15px 5px;
        gap: 2px;
        text-align: center;
        flex-shrink: 0; /* Prevent header from shrinking */
    }

    .header-content {
        align-items: center;
        margin-left: 0;
    }

    .header h1 {
        font-size: 28px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 2px;
        text-align: center;
    }

    .header p {
        font-size: 9px;
        opacity: 0.8;
        margin-bottom: 0;
        text-align: center;
    }

    .logo {
        display: none;
    }

    .wordmark-svg {
        max-width: 120px;
        height: auto;
    }

    /* Panel and inventory adjustments */
    .left-panel {
        display: none; /* Hide left panel on mobile */
    }
    
    .right-panel {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0; /* Allow flex item to shrink below content size */
    }

    .inventory-list {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 0; /* Allow flex item to shrink */
        /* Constrain height so scrollbar stops before mobile nav */
        max-height: calc(100vh - 200px - env(safe-area-inset-bottom, 0px));
        /* Ensure scrolling works properly on mobile */
        overscroll-behavior: contain;
        /* Add momentum scrolling for iOS */
        -webkit-overflow-scrolling: touch;
    }

    .inventory-header {
        flex-shrink: 0; /* Prevent header from shrinking */
        padding: 5px 10px;
    }

    .inventory-controls {
        flex-direction: column;
        width: 100%;
        flex-shrink: 0; /* Prevent controls from shrinking */
        padding: 0;
    }

    .inventory-controls select,
    .inventory-controls button {
        width: 100%;
    }

    /* Item styling */
    .item-info {
        flex-direction: column;
        align-items: flex-start;
    }

    .item-name {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .item-name .part-name-text {
        display: block;
        font-size: 14px;
        font-weight: 500;
        color: #F8F8F2;
        margin-bottom: 2px;
    }

    .type-pill {
        display: block;
        margin: 2px 0 0 0;
        max-width: 100%;
        font-size: 10px;
        white-space: normal;
        overflow-wrap: break-word;
        text-overflow: initial;
    }

    .item-quantity,
    .item-quantity.low {
        width: 110px;
        min-width: 0;
        justify-content: center;
        box-sizing: border-box;
    }

    .quantity-number {
        width: 100%;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .quantity-controls {
        gap: 8px;
    }

    .quantity-btn {
        padding: 4px 8px;
    }

    .project-tag {
        font-size: 10px;
        padding: 1px 4px;
        max-width: 100px;
    }

    .inventory-item {
        padding: 12px 8px;
    }

    /* Navigation and buttons */
    .mobile-nav {
        display: flex;
    }

    .sync-buttons {
        display: none;
    }

    .manage-projects-btn,
    #compareAllProjectsBtn {
        display: none;
    }

    .desktop-only {
        display: none;
    }

    .footer {
        display: none;
    }

    /* BOM Assistant adjustments */
    .bom-assistant-content {
        max-height: 60vh;
        padding-right: 5px;
        position: relative;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    .import-methods {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .template-header {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
        text-align: center;
    }

    .copy-prompt-btn {
        width: 100%;
        padding: 12px 16px;
        font-size: 14px;
    }

    #promptTemplate {
        font-size: 11px;
        padding: 12px;
    }

    .popular-ais .ai-links {
        grid-template-columns: 1fr;
    }

    .step-list li, .tips-list li {
        font-size: 12px;
        padding: 8px 12px;
    }

    /* Purchase link adjustments */
    .part-card.has-purchase-url:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .purchase-link-icon {
        font-size: 11px;
        top: 6px;
        right: 6px;
    }
}
  
@media (max-width: 1024px) {
  .quantity-btn {
    padding: 6px 10px;
    font-size: 16px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 4px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(94, 129, 172, 0.2);
    box-sizing: border-box;
    /* Prevent cursor flickering on mobile */
    position: relative;
    z-index: 3;
  }
  
  /* Ensure all interactive elements have consistent cursor behavior on mobile */
  .btn, .sync-btn, .add-part-btn, .export-btn, .import-btn,
  .manage-projects-btn, .action-icon, .modal-buttons button {
    -webkit-tap-highlight-color: rgba(94, 129, 172, 0.2);
    touch-action: manipulation;
  }
  
  /* Prevent cursor flickering on mobile inventory items */
  .inventory-item {
    -webkit-tap-highlight-color: rgba(67, 76, 94, 0.2);
    touch-action: manipulation;
  }
}
  
/* Ensure custom font is used in all navigation and menu elements */
.mobile-nav,
.mobile-nav-item,
.mobile-menu,
.mobile-menu-item {
    font-family: 'JetBrains Mono', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
  
/* --- Compact requirements list for Compare All modal --- */
.requirements-simple-list {
  list-style: none;
  margin: 0;
  padding: 0 0 10px 0;
  max-width: 100vw;
  overflow-x: hidden;
}

.requirements-list-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--nord3);
  font-size: 14px;
  background: #2E3440;
  transition: background 0.15s;
  flex-direction: row !important;
  max-width: 100vw;
  overflow-x: hidden;
}
.requirements-list-item:last-child {
  border-bottom: none;
}
.requirements-list-item:hover {
  background: #3B4252;
}
.status-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 2px;
  flex-shrink: 0;
}
.status-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.status-error {
  color: #BF616A;
}
.status-warning {
  color: #EBCB8B;
}
.status-success {
  color: #A3BE8C;
}
.part-name {
  font-weight: 600;
  color: #ECEFF4;
  flex: 1 1 180px;
  min-width: 80px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.part-qty-info {
  color: #D8DEE9;
  font-size: 13px;
  margin-left: 8px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.part-usage {
  color: var(--nord8); /* Bright blue instead of gray */
  font-size: 12px;
  margin-left: auto;
  flex: 0 0 180px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  cursor: help;
}

/* Add tooltip on hover for truncated part-usage */
.part-usage:hover::after {
  content: attr(title);
  position: absolute;
  right: 0;
  top: 100%;
  background: var(--nord1);
  color: var(--nord6);
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid var(--nord3);
  z-index: 1000;
  white-space: normal;
  max-width: 300px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 11px;
  line-height: 1.3;
  word-break: break-word;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.part-usage:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* Alternative: Smart truncation with fade effect */
.part-usage.fade-truncate {
  background: linear-gradient(to left, transparent 0%, var(--nord1) 20px);
  -webkit-background-clip: text;
  background-clip: text;
  position: relative;
}

.part-usage.fade-truncate::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  background: linear-gradient(to right, transparent, var(--nord1));
  pointer-events: none;
}

@media (max-width: 1024px) {
  .requirements-simple-list {
    max-width: 100vw;
    overflow-x: hidden;
  }
  .requirements-list-item {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 8px;
    font-size: 13px;
    padding: 8px 4px;
    max-width: 100vw;
    overflow-x: hidden;
    flex-wrap: wrap;
  }
  .part-name, .part-qty-info {
    max-width: 100vw;
    min-width: 0;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: left;
  }
  .requirements-list-item .part-usage {
    margin-left: 0 !important;
    font-size: 11px !important;
    /* Show more text on tablet/mobile by allowing wrapping */
    white-space: normal !important;
    text-overflow: initial !important;
    overflow: visible !important;
    flex: 1 1 100% !important;
    margin-top: 4px !important;
    padding: 4px 8px !important;
    background: rgba(136, 192, 208, 0.15) !important;
    border-radius: 4px !important;
    border-left: 2px solid var(--nord8) !important;
    text-align: left !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Hide tooltip on tablet/mobile since text is already visible */
  .part-usage:hover::after {
    display: none;
  }
}

/* Desktop-only: Keep truncation with tooltip for very wide screens */
@media (min-width: 1025px) {
  .part-usage {
    /* Only truncate on desktop where there's plenty of space for tooltips */
    max-width: 200px; /* Slightly wider than before */
  }
}

#allProjectRequirementsModal .modal-content {
  max-width: 100vw;
  overflow-x: hidden;
}
  
/* =============================================================================
   CURSOR FLICKERING PREVENTION
   ============================================================================= */

/* Ensure proper cursor behavior for all interactive elements */
button, .btn, [role="button"], [onclick], [data-action] {
    /* Prevent cursor state conflicts */
    position: relative;
    z-index: 1;
}

/* Prevent cursor flickering on nested elements */
button *, .btn *, [role="button"] *, [onclick] *, [data-action] * {
    pointer-events: none;
}

/* Special handling for modal triggers to prevent cursor lock-up */
button[onclick*="Modal"], .btn[onclick*="Modal"], [onclick*="showModal"] {
    /* Force hardware acceleration to prevent cursor state conflicts */
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Prevent rapid state changes */
    transition: all 0.15s ease;
}





/* Fix for Safari and other WebKit browsers */
@supports (-webkit-touch-callout: none) {
    button, .btn, [role="button"], [onclick], [data-action] {

        -webkit-tap-highlight-color: rgba(94, 129, 172, 0.2);
    }
}

/* =============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================= */

/* Enable hardware acceleration for animations 
   Note: will-change properties removed to prevent browser memory budget warnings */
.inventory-item {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Mobile nav gets special hardware acceleration that doesn't conflict with translateY */
.mobile-nav,
.mobile-menu {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Notification gets special hardware acceleration that doesn't conflict with translateX */
.notification {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Low battery mode optimizations */
.low-battery-mode * {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
}

/* Exceptions: Keep essential transitions even in low battery mode */
.low-battery-mode .notification {
    transition-duration: var(--notification-duration) !important;
}

.low-battery-mode .mobile-nav,
.low-battery-mode .mobile-menu {
    transition-duration: 0.3s !important;
}

.slow-device .inventory-item:hover {
    transform: none !important;
}

.slow-device .part-card.has-purchase-url:hover {
    transform: none !important;
}

/* Optimize expensive operations */
.inventory-list {
    contain: layout paint;
    content-visibility: auto;
    contain-intrinsic-size: 1px 5000px;
}

.inventory-item {
    contain: layout style paint;
}

/* Mobile uses the same thick squared scrollbars as desktop */

/* Optimize transform and opacity animations */
@media (prefers-reduced-motion: no-preference) {
    .modal {
        transition: opacity 0.3s ease,
                   visibility 0.3s ease;
    }
    
    .modal-content {
        transition: transform 0.3s ease;
    }
}

/* Notification always has transitions (even if user prefers reduced motion) */
.notification {
    transition: transform var(--notification-duration) var(--notification-easing) !important;
}

/* Performance-aware hover states */
@media (hover: hover) and (pointer: fine) {
    .inventory-item:hover {
        background-color: var(--nord3);
    }
    
    .btn:hover,
    .action-icon:hover,
    .quantity-btn:hover {
        transform: translateY(-1px);
    }
}

/* Reduce layout thrashing */
.project-tag,
.type-pill {
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Optimize grid layouts */
.parts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 15px;
    contain: layout;
}

/* Efficient mobile optimizations */
@media (max-width: 1024px) {
    .inventory-item {
        contain: layout style;
    }
    
    /* Reduce expensive transforms on mobile */
    .btn:hover,
    .action-icon:hover,
    .quantity-btn:hover {
        transform: none;
    }
    
    /* Simplify animations */
    .mobile-nav,
    .mobile-menu {
        transition: transform 0.3s cubic-bezier(0.33, 0.00, 0.00, 1.00);
    }
}